Как отправить реквизит в переменную на основе общесистемной темы в javascript?

Question

Как отправить реквизиты в компонент на основе общесистемной темы?

Я знаю, как стилизовать мои компоненты с помощью медиазапроса для темных и светлых тем с помощью @media prefers-color-схема, но я Я работаю с библиотекой и компонентом response- 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

  } 
}

Answer 1

Почему вы не используете 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>
        )
    }
}

Answer 2

Это должно сработать

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

Answer 3

Таким образом, самый простой способ - получить реквизит вашего компонента, который будет описывать, находится ли он в темном или светлом режиме. Я сделаю следующий пример:

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

Другой способ - это использовать для вашего приложения избыточность или управление состоянием, но если это простое приложение, вышеприведенное должно работать.