[英]Angular dark theme and root css variables
On my site, I am adding the possibility to switch between a dark mode and a light mode.在我的网站上,我添加了在暗模式和亮模式之间切换的可能性。 And so I have a service that allows me to make this switch without too many problems on the css side.
因此,我有一项服务可以让我在 css 端进行此切换而不会出现太多问题。 Basically, I declared css variables at the:root level and I redeclared these same variables in:root.dark-theme.
基本上,我在:root 级别声明了 css 变量,并在:root.dark-theme 中重新声明了这些相同的变量。
When I click on a button I add or remove the dark-theme class.当我单击一个按钮时,我添加或删除了深色主题 class。
if (this.isDark) {
this.renderer.addClass(this.document.body, 'dark-theme');
} else {
this.renderer.removeClass(this.document.body, 'dark-theme');
}
My problem is that I am trying to retrieve the values of some variables directly in my component.我的问题是我试图直接在我的组件中检索一些变量的值。
I tried this piece of code to retrieve the value of a particular variable.我尝试了这段代码来检索特定变量的值。
getComputedStyle(
document.documentElement
).getPropertyValue('--border-color');
I manage to retrieve the one in:root but when I switch and add dark-theme, it always retrieves the value in:root and not in:root.dark-theme.我设法检索了 in:root 中的那个,但是当我切换并添加暗主题时,它总是检索 in:root 而不是 in:root.dark-theme 中的值。
How can I manage to retrieve the values in dark-theme as well?我怎样才能设法检索深色主题中的值?
change the element parameter of getComputedStyle to document.body
将getComputedStyle的元素参数改为
document.body
getComputedStyle(document.body).getPropertyValue('--border-color')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.