Question

我想根据用户单击暗模式还是亮模式来更改CSS属性。每次切换模式时，我都可以获得一个要捕获值的订阅，但是我希望能够在单击不同模式时更改CSS中的某些属性。

我正在使用Angular 9

关于如何做到这一点的任何想法？

Answer 1

您可以在ts文件中添加变量，

modeType: string;

这将根据用户的选择更改为“暗”或“亮”。

在您的html中更改css属性，请使用ngClass。或使用

<div class="{{modeType == 'dark' ? 'dark-property': 'light-property'}}">

在您的CSS文件中，

.dark-property{
 add your "dark" css styles
}

.light-property{
 add your "light" css styles
}

Answer 2

您可以使用样式化的组件。一个例子是：

import styled from 'styled-components'

const ComponentName = styled.div`
    color: ${props => props.mode === `dark` ? `white` : `black`};
`

然后在渲染中执行以下操作：

<ComponentName mode={mode} />

Answer 3

您可以使用 BehaviourSubject 来实现此功能。默认情况下，您可以设置为false，并在用户使用next（）方法单击开关时使用灯光模式，将行为更改为true，然后更改为黑暗等。您必须在init上订阅 BehaviourSubject 变量并进行处理响应。

您可以在BehaviourSubject上找到参考。

我亲自在项目中实现了这种暗模式功能，这里是链接telivic.com，我在该网站上使用的方法如下。希望这对您有用。

addDark(){
    document.getElementById('nav').classList.add('dark');
    document.getElementById('box').style.backgroundColor = "#35363A";
     document.getElementsByTagName("BODY")[0].classList.add('dark');
     document.getElementById('modal').style.backgroundColor ="bisque";
     if(this.service.flag){
      document.getElementById('opt').classList.add('dark');
     }
     document.getElementById('gen').style.color="white";
     
  }
  removeDark(){
    document.getElementById('nav').classList.remove('dark');
    document.getElementById('box').style.backgroundColor = "#fff";
     document.getElementsByTagName("BODY")[0].classList.remove('dark');
     document.getElementById('modal').style.backgroundColor ="white";
     if(this.service.flag){
      document.getElementById('opt').classList.remove('dark');
     }
     document.getElementById('gen').style.color="black";
  }
  /*Binded my switch to this function I have used service so that user   dark/light mode preference can be processed in other pages also.*/
  darkMode(){
    this.dark = !this.dark;
    this.userService.setMode();
    if(this.dark){
      this.addDark();
    }else{
     this.removeDark();
      
    }
    
  }

根据订阅的变量应用CSS属性。暗模式与亮模式

3 个答案: