在 CSS 变量和向元素添加新类之间，实现暗模式的成本最低? [英] Between CSS Variables and adding new classes to elements which is least cost intensive for implementing Dark Mode?

问题描述

我正在尝试为我的网站(使用 React 构建)实施黑暗模式".我应该使用 css 变量还是应该为亮"和暗"模式定义不同的类?

I am trying to implement 'dark mode' for my website (built using React). Should I use css-variables or should I define different classes for 'light' and 'dark' mode?

哪个解决方案优化得更好?

Which solution is better optimised?

尽管目前规模较小，但预计该网站会扩大规模.

Although currently small, the website is expected to scale up to a huge size.

也欢迎任何替代解决方案.

Any alternate solution is welcome too.

推荐答案

Depreciated: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener

Depreciated: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener

在旧浏览器中 MediaQueryList 还没有从 EventTarget 继承，所以这个方法作为 EventTarget.removeEventListener() 的别名提供

  constructor(props) {
    super(props);
    this.darkModeQuery = window.matchMedia(`(prefers-color-scheme: dark)`);
    this.lightModeQuery = window.matchMedia(`(prefers-color-scheme: light)`);
  }
  componentDidMount = () => {
    window.addEventListener(this.darkModeQuery, this.setDark);
    window.addEventListener(this.lightModeQuery, this.setLight);      };
  setDark = (darkModeQuery) =>
    this.setState({
      darkMode: darkModeQuery.length !== 0,
      darkModeListener: darkModeQuery
    });
  setLight = (lightModeQuery) =>
    this.setState({
      lightMode: lightModeQuery.length !== 0,
      lightModeListener: lightModeQuery
    });
  componentWillUnmount = () => {
    const { lightModeListener, darkModeListener } = this.state;
    if (lightModeListener)
      window.removeEventListener(this.lightModeQuery, this.setLight);
    if (darkModeListener)
      window.removeEventListener(this.darkModeQuery, this.setDark);
  };

this 用于类组件 React，其中使用了 this.，而不是 func，其中使用了 useRef()

this is for class component React, where this., instead of func, where useRef(), is used

这篇关于在 CSS 变量和向元素添加新类之间，实现暗模式的成本最低?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！