在AngularJS项目上设置黑暗模式

Question

我目前有一个要设置为黑暗模式的AngularJS项目。

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

现在，它可以通过侦听来自操作系统的媒体查询来工作，并覆盖某些类。

我尝试过

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

也

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

但是我看不到任何变化。

我似乎找不到使用JS更改@media（首选颜色方案：深色）首选项的方法。

如果有角度范围，是否有一种方法可以覆盖内部OS？

Answer 1

如果您尝试通过@media (prefers-color-scheme: dark) {...}控制主题，则在JavaScript级别上您无法进行任何调整。该介质是由user-agent设置的，或者在macOS情况下甚至由OS设置。

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

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>