Установить темный режим для проекта AngularJS

Question

В настоящее время у меня есть проект AngularJS, который я настраиваю для Dark Mode.

Это устаревшее приложение, оно довольно сложное и не хочет клонировать файл css.

Сейчас он работает, слушая медиа-запрос из ОС, и переопределяет некоторые классы.

Я пробовал

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

также

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

Но я не вижу никаких изменений.

Кажется, я не могу найти способ изменить предпочтение @media (prefers-color-circuit: dark) с помощью JS.

Есть ли способ переопределить ОС внутри, если область действия 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>