метод переключения, который используется для изменения темы пользовательского интерфейса, не работает?

Question

Я определил свои переменные s css, и мое требование состоит в том, чтобы, когда я нажимаю кнопку переключения, тема всей страницы должна изменяться.

Для этой цели я определил toggletheme () как:

document.body.classList.toggle("dark-theme");

Но это не работает по какой-то причине.

Определите темную тему, как в s css:

//Dark Theme

$dark-chart-header: rgba(51,51,51,1);
$gray-2: rgba(32,32,32,1);
$light-gray-2: rgba(65,65,65,1);
$dark-gray-2: rgba(15,15,15,1);
$black: rgba(0,0,0,1);
$purple: rgba(80,7,120,1);
$graytext: rgba(201,201,201,1);
$lightgraytext: rgba(220,220,220,1);

$green: rgba(99,204,96,1);
$red: rgba(241,108,99,1);
$grayborder: rgba(209,209,209,0.2);
$darktext: rgba(51,51,51,1);


$no-padding: 0;
$no-margin: 0;
$no-border: none;


$tiny-font: 0.5em;
$xs-font: 0.6em;
$small-font: 0.7em;
$normal-font: 0.8em;
$normal-font-2: 0.9em;
$large-font: 1em;


$fluid: 100%;


$hide: none;
$show: inline-block;

это все в компоненте заголовка который, в свою очередь, встроен в компонент приложения.

Есть помощь?

Answer 1

Я бы попытался внедрить глобальный документ:

constructor(@Inject(DOCUMENT) private document: Document) {}

А затем использовать это внедренное свойство:

this.document.body.classList.toggle("dark-theme");

Я всегда стараюсь использовать Renderer2 для доступа к dom, но поскольку вы хотите изменить класс самого тела, я бы попробовал вот так.

И убедитесь, что все эти s css темной темы находятся внутри:

.dark-theme {
   ...
}

в глобальном стили s css