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

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

我知道如何使用媒体查询为带有@media prefers配色方案的深色和浅色主题设置组件的样式，但我正在使用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

  } 
}

从“react json视图”导入react json；
从“React”导入React；
类JsonDialog扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
勾选：假，
抄袭：假
};
}
render（）{
return//这里我需要在黑暗或光明模式的基础上应用主题
} 
}

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

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
  } 
}

从“react json视图”导入react json；
从“React”导入React；
类JsonDialog扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
勾选：假，
抄袭：假
};
}
render（）{
const themeName=this.props.dark“冷漠”：“冷漠：倒置”
return//这里我需要在黑暗或光明模式的基础上应用主题
} 
}

---

另一种方法是对你的应用程序使用redux或某种状态管理，但是如果它是一个简单的应用程序，上面的方法应该可以工作

这应该能奏效

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

---

为什么不使用React上下文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>
        )
    }
}

从“React”导入React；
const ThemeContext=React.createContext（）；
导出默认类App扩展React.Component{
render（）{
返回(
{/*其他组件*/}
)
}
}
类JsonDialog扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
勾选：假，
抄袭：假
};
}
render（）{
报税表（
{主题=>}
)
}
}

遗憾的是，无法找到主题模式，这里不需要上下文，我只需要找到它在明暗两种情况下的主题模式。不需要，因为我的应用程序中没有暗模式切换。应用程序主题基于系统范围的设置，如果主题是暗的，它将变暗&我使用媒体查询来处理css，如：“@media”（首选配色方案：深色）{//css//}遗憾的是，由于我的应用程序中没有深色模式切换，因此应用程序主题基于系统范围的设置，如果主题为深色，则会变暗&我使用媒体查询来处理css，如：“@media（首选配色方案：深色）{//”因此，我的产品中没有黑暗不知道你在说什么我正在使用现代操作系统中存在的系统范围的主题设置-媒体查询同样是：你是说你想在你的操作系统操作系统黑暗/光明模式下设置主题？不，我是说我无法在Java中检测到操作系统级别的主题脚本，只有通过css我才能设置我的应用程序的颜色，这里有一个自定义组件，我需要给它发送主题道具“light”用于亮模式，“Dark”用于暗模式。但我只能在css中找到主题设置，而不能在javascript中找到，我无法编写该条件。