在AngularJS项目上设置深色模式

Question

我目前有一个AngularJS项目，我正在为黑暗模式设置它。

这是一个遗留的应用程序，非常复杂，不想克隆css文件。

现在，它通过监听来自操作系统的媒体查询来工作，并覆盖了一些类。

我试过了

document.documentElement.setAttribute('data-theme', 'light');

也是

angular.element(document.documentElement).setAttribute("data-theme", "dark");;

但我看不到任何变化。

我似乎找不到一种方法来使用JS更改@media (偏好-颜色-方案:暗)首选项。

如果是angular的作用域，有没有办法覆盖里面的操作系统？

Answer 1

如果您试图通过@media (prefers-color-scheme: dark) {...}控制主题，那么在JavaScript级别上您无法对其进行调整。这个媒体片段是由用户代理设置的，甚至在macOS的情况下也是由操作系统设置的。

考虑用相同的代码生成的以下图像，只是根据我告诉我的操作系统在主题方面的偏好而有所不同：

​

​

​

​

​

p {
background-color: white;
color: black;
}

@media (prefers-color-scheme: dark) {
 p {
 background-color: black;
 color: white;
 }
}

<p>Hello World!</p>

​

如果你想用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>

​

Answer 2

你实际上可以很容易地做到这一点，但最好是有一些数据库来存储userSettingsTable颜色主题信息属性，如#000000或#FFFFFF，并在每次用户点击颜色更改主题时获取信息或设置，以便在所有页面中保持全局更改！

以下是您可以执行的操作的示例

-在HTML中的body标记下

首先，您必须在下面声明controller + app ng-app="yourname“ng-controller=”yourname

<style ng-init=checkcolor()>
    body{
        background-color: {{colortheme}};
    }
</style>

-内部控制器

$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>
}

-内部模型/后端，例如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);

?>

还要记住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;

            })
          }