Как сделать switcher для переключение стилей (светлая/темная тема)?

Question

[Denis_8106]

Ребята помогите, как правильно реализовать переключение темной/светлой темы на React? Не знаю с чего начать, к чему подступиться.

Под капотом моего app есть главный компонент - Main, в нем есть компонент Setting, соответственно, а в нем (Setting) есть компонент switcher (input, type="checkbox", 2 состояния light/dark).

По стилям, все просто, - SCSS. Вынесен отдельный модуль(файл) по цветам темы - colors.scss (пока он заточен под light-версию). Скорее он переименуется в light.scss и добавится dark.scss. И хотелось бы чтобы вышеуказанный switcher переключал эти файлы.

Теперь как организовать такой функционал? (Все компоненты функциональные). Буду благодарен за любые идеи или набросок кода.

Switcher.js

import React from 'react';
import './Switcher.scss';

export default function Switcher({ ...props }) {
    return (
        <div className='switcher'>
            <h3 className={props.title_class}>{props.title}</h3>
            <div className='box'>
                <input
                    id={props.id}
                    type='checkbox'
                    onClick={props.onClick}
                    value={props.value}
                    checked={props.checked}
                    readOnly
                />
                <label htmlFor={props.id}></label>
                <div className='labels df'>
                    <p className='label-lt'>{props.label_lt}</p>
                    <p className='label-rt'>{props.label_rt}</p>
                </div>
            </div>
        </div>
    );
}

Setting.js

import React, { useEffect } from 'react';
import Switcher from '../Switcher/Switcher';

import './Setting.scss';

export default function Setting() {
...
    return (
        <section id='setting'>
    ...
      <Switcher
        id='theme'
        title='Theme'
        title_class='lng-set_subtitle2'
        label_lt='Light'
        label_rt='Dark'
        // value={theme}
        // onClick={chooseTheme}
        // checked={checkedTheme}
        readOnly
      />
        </section>
    );
}

Comments

[Роман]

1) useState
2) useContext

У реакта документация на русском, там есть пример с темами

Answer 1

[Denis_8106]

https://codesandbox.io/s/n73x4p30xj?file=/src/index.js