如何根据javascript中的系统范围主题将道具发送到变量？

Posted 2023-02-22

【中文标题】如何根据javascript中的系统范围主题将道具发送到变量？

【英文标题】：How to send props to a variable on the basis of system wide theme in javascript?

【发布时间】：2020-06-23 07:04:15

【问题描述】：

如何根据系统范围的主题向组件发送道具？

我知道如何使用 @media prefers-color-scheme 为深色和浅色主题的媒体查询设置组件样式，但我正在使用 react-json-vew 库和组件，它需要一个我需要的主题道具在切换系统范围的暗模式时进行更改。

它是一个自定义组件，所以我不想自己设置它的样式，这也会增加代码的长度。

片段：

import ReactJson from "react-json-view";
import React from "react";

class JsonDialog extends React.Component 
constructor(props) 
    super(props);

    this.state = 
      checked: false,
      copied: false
    ;
  
render()
        return    <ReactJson src=json theme="apathy:inverted" /> // here I need to apply theme on the basis of dark or light mode

   

【参考方案1】：

因此，最简单的方法是为您的组件接收一个道具，该道具将描述它是处于暗模式还是亮模式。我将做以下示例：

import ReactJson from "react-json-view";
import React from "react";

class JsonDialog extends React.Component 
constructor(props) 
    super(props);

    this.state = 
      checked: false,
      copied: false
    ;
  
render()
    const themeName = this.props.dark ? 'apathy':'apahty:inverted'
    return    <ReactJson src=json theme=themeName /> // here I need to apply theme on the basis of dark or light mode
   

另一种方法是为您的应用使用 redux 或某种状态管理，但如果它是一个简单的应用，上述方法应该可以工作。

【讨论】：

遗憾的是，由于我的应用程序中没有暗模式切换，所以应用程序主题基于系统范围的设置，如果主题是暗的，它会变暗并且我使用媒体查询来处理 css， like: '@media (prefers-color-scheme: dark)', //css// 所以我的道具中没有黑暗

不知道你在说什么

我正在使用系统范围的主题设置，这些设置存在于现代操作系统中 - 相同的媒体查询是：

您是说要根据您的操作系统 OS 暗/亮模式设置主题？

不，我是说我无法在javascript中检测到操作系统级别的主题，只有通过css我才能设置我的应用程序的颜色，这里有一个自定义组件，我需要将主题道具“light”发送给 Light 模式，将“Dark”发送给深色模式。但我只能在我的 css 中找到主题设置，而不是在 javascript 中，我无法编写那个条件。

【参考方案2】：

这应该可以解决问题

<ReactJson src=json theme=this.props.dark ? "darkThemeName" : "lightThemeName" />

【讨论】：

很遗憾，没有，因为我的应用程序中没有暗模式切换，所以应用程序主题基于系统范围的设置，如果主题是暗的，它会变暗，我使用媒体查询来处理 css , 比如: '@media (prefers-color-scheme: dark)', //css//

【参考方案3】：

为什么不使用 React Context API？

import React from 'react';

const ThemeContext = React.createContext();

export default class App extends React.Component  
  render() 
    return (
      <ThemeContext.Provider value='apathy:inverted'>            
            <JsonDialog/>       
            /* Other Components */
      </ThemeContext.Provider>
    )
  


class JsonDialog extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            checked: false,
            copied: false
        ;
    
    render()         
        return( 
            <ThemeContext.Consumer>
                theme=> <ReactJson src=json theme=theme />
            </ThemeContext.Consumer>
        )
    

【讨论】：

很遗憾无法找到主题模式，这里不需要上下文我只需要找到它在天气明暗时是什么主题模式