How to make a switcher to switch styles (light/dark theme)?

Question

React

Guys, help me, how to properly implement dark / light theme switching in React? I don't know where to start, where to start.

Under the hood of my app there is a main component - Main, it has a Setting component, respectively, and it (Setting) has a switcher component (input, type="checkbox", 2 light/dark states).

In terms of styles, everything is simple - SCSS. A separate module (file) for the colors of the theme - colors.scss has been moved out (while it is sharpened for the light version). Rather, it will be renamed to light.scss and dark.scss will be added. And I would like the above switcher to switch these files.

Now how to organize such functionality? (All components are functional). I would be grateful for any ideas or code sketch.

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

Answer 1

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