[英]Set Dark mode on an AngularJS project
I currently have an AngularJS project that I am setting up for Dark Mode.我目前有一个 AngularJS 项目,我正在为暗模式设置。
This is a legacy app and is pretty complex and would not like to clone the css file.这是一个遗留应用程序,非常复杂,不想克隆 css 文件。
Right now it works by listening for a media query from the OS and overrides some classes.现在它通过侦听来自操作系统的媒体查询并覆盖一些类来工作。
I have tried我试过了
document.documentElement.setAttribute('data-theme', 'light');
also还
angular.element(document.documentElement).setAttribute("data-theme", "dark");;
But I do not see any changes.但我没有看到任何变化。
I cannot seem to find a way to change the @media (prefers-color-scheme: dark) preference using JS.我似乎找不到使用 JS 更改 @media (prefers-color-scheme: dark) 偏好的方法。
Is there a way to override the OS inside if the scope of angular?如果角度的范围,有没有办法覆盖内部的操作系统?
If you are trying to control theme through @media (prefers-color-scheme: dark) {...}
, there is nothing at the JavaScript level that you can do to adjust it.如果您尝试通过
@media (prefers-color-scheme: dark) {...}
控制主题,则在 JavaScript 级别上您无法进行任何调整。 This media piece is set by the user-agent or maybe even the OS in the case of macOS.这个媒体片段是由用户代理设置的,在 macOS 的情况下甚至可能是由操作系统设置。
Consider the following images that are produced with the same code just varied by what I tell my OS to prefer in terms of themes:考虑以下使用相同代码生成的图像,只是根据我告诉操作系统在主题方面更喜欢的内容而有所不同:
p { background-color: white; color: black; } @media (prefers-color-scheme: dark) { p { background-color: black; color: white; } }
<p>Hello World!</p>
If you want to be able to control this with JavaScript, you'll need to do this with CSS classes:如果你想用 JavaScript 来控制它,你需要用 CSS 类来做到这一点:
const app = document.getElementById("app"); const lightBtn = document.getElementById("light"); const darkBtn = document.getElementById("dark"); lightBtn.addEventListener("click", () => { app.classList.remove("dark"); app.classList.add("light"); }); darkBtn.addEventListener("click", () => { app.classList.remove("light"); app.classList.add("dark"); });
#app.light, #app.light p, #app.light button { background-color: white; color: black; } #app.dark, #app.dark p, #app.dark button { background-color: black; color: white; }
<div id="app"> <p>Hello World!</p> <button id="dark">Dark</button> <button id="light">Light</button> </div>
You can actually do it pretty easily but its better to have some Database to store userSettingsTable colortheme information propertie as #000000 or #FFFFFF and get the information or set everytime that a user Click on color changetheme in order to keep it globally in all pages Changed !.您实际上可以很容易地做到这一点,但最好有一些数据库将 userSettingsTable colortheme 信息属性存储为 #000000 或 #FFFFFF,并在每次用户单击颜色更改主题时获取信息或设置,以便在所有页面中保持全局更改!。
here is an example of what you can do这是您可以做什么的示例
-------------inside HTML under body tag--------- -------------在正文标签下的 HTML 内---------
first you must declare the controller + app ng-app="yourname" ng-controller="yourname" below that首先,您必须在其下方声明控制器 + 应用程序 ng-app="yourname" ng-controller="yourname"
<style ng-init=checkcolor()>
body{
background-color: {{colortheme}};
}
</style>
---------Inside Controller------ ---------内部控制器------
$scope.changeTheme = function (colortheme){
if(colortheme == '#000'){
$scope.colortheme = '#FFF';
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'color':$scope.colortheme,'action':'setcolor'}
}).then(function(response) {
console.log('changed to WHITE');
console.log($scope.user_profile);
console.log($scope.colortheme);
})
} else if (colortheme == '#FFF') {
$scope.colortheme = '#000';
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'color':$scope.colortheme,'action':'setcolor'}
}).then(function(response) {
console.log(response.data);
console.log('changed to DARK');
console.log($scope.user_profile);
console.log($scope.colortheme);
})
}
}
$scope.checkcolor = function (){
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'action':'getcolor'}
}).then(function(response) {
console.log(response.data);
$scope.colortheme = response.data.toString();
console.log($scope.colortheme.toString());
})//user_profile is Database fetched user that i got it like this
//<td><input type="hidden" ng-init="user_profile='<?php echo
//$user['email']; ?>'"></td>
}
-----------inside model/backend eg PHP-------------- -----------内部模型/后端,例如 PHP--------------
<?php
//fetch_data_user_colortheme.php
$connect = new PDO("mysql:host=localhost;dbname=cinema_db", "root", "");
$form_data = json_decode(file_get_contents("php://input"));
if ($form_data->action == 'getcolor') {
$query = "SELECT colortheme FROM usersettingstable
WHERE user_fk='".$form_data->user_profile."'";
$statement = $connect->prepare($query);
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row['colortheme'];
}
}
}
//database RELATIONAL that why i update user_fk as well has constraints
//foreign key entry name usersettingstable with id A.I user_fk to idendity
//unique and
//color setting
elseif ($form_data->action == 'setcolor') {
$query = "
UPDATE usersettingstable
SET user_fk='".$form_data->user_profile."', colortheme='".$form_data->color."'
";
$statement = $connect->prepare($query);
if($statement->execute())
{
}
$query = "SELECT colortheme FROM usersettingstable
WHERE user_fk='".$form_data->user_profile."'";
$statement = $connect->prepare($query);
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row['colortheme'];
}
}
}
echo json_encode($data);
?>
also keep in mind the function checkcolor() and only that must be included in other pages as well with a kind of controller callling it with ng-init="checkcolor()" anywhere so the color in other pages is carry over as well and maybe just maybe you need to adjust it a little bit like还要记住函数 checkcolor() 并且只有它也必须包含在其他页面中,并且有一种控制器在任何地方使用 ng-init="checkcolor()" 调用它,以便其他页面中的颜色也可以保留,并且也许只是也许你需要稍微调整一下
$scope.checkcolor = function (){
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile,
'action':'getcolor'}
}).then(function(response) {
console.log(response.data);
$scope.colortheme = response.data.toString();
console.log($scope.colortheme.toString());
document.body.style.background = $scope.colortheme;
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.