Javascript 在AngularJS项目上设置暗模式

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

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

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

我试过了

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

也

但我看不到任何变化

我似乎找不到一种方法来改变使用JS的@media（首选配色方案：深色）首选项

---

有没有一种方法可以覆盖操作系统内部的角度范围？

如果您试图通过

@media（首选配色方案：深色）{…}

控制主题，在JavaScript级别上您无法对其进行任何调整。此媒体片段由用户代理设置，对于macOS，甚至可能由操作系统设置

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

p{
背景色：白色；
颜色：黑色；
}
@介质（首选颜色方案：深色）{
p{
背景色：黑色；
颜色：白色；
}
}

---

你好，世界
 

实际上，您可以非常轻松地完成此操作，但最好有一些数据库将用户设置稳定的颜色主题信息属性存储为#000000或#FFFFFF，并在用户每次单击颜色更改主题时获取信息或设置，以便在所有页面中保持全局更改

下面是一个你可以做的例子

-------------body标记下的内部HTML---------

首先，您必须声明控制器+app ng app=“yourname”ng controller=“yourname” 低于

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

---

如果您试图触发

@media（首选颜色方案：深色）{}

，这是用户代理级别的设置。它由浏览器本身设置为用户首选项。它不是由JavaScript.Hmm设置的，所以无法手动设置？（配色方案）？除了操作系统级别之外？不，如果你想用JS控制它，你需要使用CSS类。但是这会与首选颜色方案首选冲突。然后，您可以将首选项设置为深色，并将css变量设置为浅色。你是说谁在乎偏好是什么，就用css变量吧？@mKane我是说你可能想选择一种机制或另一种。你也可以检查一下，看看你是否可以将这2个选项与你想要的CSS级别偏好组合在一起，甚至可以使用

@media（prefers color scheme:no preference）{}

如果我在一个不支持暗模式的系统上，那么

prefers color scheme:

是否只返回no preference？@mKane我正试图弄清楚这一点。我不能在我的机器上测试它，因为我想不出一种方法来禁用媒体属性。说它在“布尔上下文”中返回false，但我真的不明白它的意思。是的，这很奇怪。我需要找到一台旧的设备。Bc按照您描述的方式，我可以在JS中获得首选项，然后从那里设置CSS变量，当我看到无pref或未定义等时，我可以使用默认值

<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

//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);

?>

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

            })
          }