javascript - 在 AngularJS 元素上设置深色模式

Question

我目前有一个 AngularJS 元素，正在为深色模式设置。

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

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

我已经尝试过

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

还有

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

但我没有看到任何变化。

我似乎无法找到使用 JS 更改 @media (prefers-color-scheme: dark) 首选项的方法。

是否有办法覆盖 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>