While many may be searching for a solution using Less/CSS modules, it's highly possible that your issue can be resolved simply by utilizing CSS variables, as pointed out by Morpheus.

How Does it Work?

To make this work, you need to ensure that all your styling avoids hardcoded values. Instead of:

.awesome-div {
  background-color: #fefefe;
}

You should use:

:root {
  --awesome-color: #fefefe;
}

.awesome-div {
  background-color: var(--awesome-color);
}

Switching Between Light and Dark Themes

There are two methods for changing themes in this manner:

• Using vanilla JavaScript code within React to update the :root CSS element, check out this CodePen for more details;
• Loading a component that contains all new :root variables in its component.css file;

In React (and vanilla CSS), multiple components or elements can declare their own :root in their .css files without any issues.

Moreover, any new :root declaration will take precedence over conflicting values from previous :root. This means that if we have a variable declared in app.css as :root { --color: red; } and then overwrite it in another component like component A with :root { --color: blue; }, the browser will render the value from component A.

Following this concept, you could have a dummy component that renders nothing, but inside its component.js file, import the .css file of a theme, for example:

import './light.css'; // Assume this is the light-theme dummy component

When swapping themes in your application, you can remove the dummy component from the scene and load the other one instead.

Although I'm not extremely familiar with CodePen when it comes to imports/modules, I hope the explanation above gives you an idea of what I'm trying to convey. Nevertheless, here's a simple pseudo-code illustrating my point:

loadTheme() {
  if (this.state.theme === 'dark') return <LightTheme />;
  if (this.state.theme === 'user-3232') return <UserTheme />;
  return <DarkTheme />;
}

render() {
  return (
    <App>
      {this.loadTheme()}
      <OtherContent>
    </App>
  );
}

If you're looking to implement CSS variables, one convenient option is to utilize the react-theme-change library.

Here's an example:

themes.ts

import ReactThemeChange from 'react-theme-change';

const base = {
    btn_radius: '50%',
};

const themes = {
    dark: {
        bg_0: 'rgba(21, 14, 65, 1)',
        title: 'rgba(255, 255, 255, 1)',
    },
    light: {
        bg_0: 'rgba(239, 242, 247, 1)',
        title: 'rgba(42, 49, 60, 1)',
    },
    gray: {
        bg_0: 'rgba(35, 42, 63, 1)',
        title: 'rgba(255, 255, 255, 1)',
    },
};
const useThemeChange = ReactThemeChange({
    base,
    themes,
    defaultTheme: 'light',
});

export default useThemeChange;    

Styles

button {
  width: 50px;
  height: 50px;
  border-radius: var(--btn_radius);
  cursor: pointer;
}

.demo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  align-items: center;
  background-color: var(--bg_0);
  color: var(--title);
}

.themeName {
  font-size: 40px;
}

.btns {
  display: flex;
  gap: 8px;
}

Switch

import React from 'react';

import useThemeChange from './themes';
import './App.scss';

function App() {
    const {theme, setTheme} = useThemeChange();

    return (
        <div className="demo">
            <div className="themeName">Current Theme: {theme.name}</div>
            <div className="btns">
                <button onClick={() => setTheme('dark')}>Dark</button>
                <button onClick={() => setTheme('light')}>Light</button>
            </div>
        </div>
    );
}

export default App;

If you're looking to style your components in a unique way, consider exploring Styled components.

https://www.npmjs.com/package/styled-components

https://styled-components.com/docs/advanced#theming

I utilized this technique as a fun Easter Egg in one of my apps and can confirm its effectiveness. Unfortunately, the code is not available for public viewing at this time.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import navStyle from './navbar.module.css';
import './assets/css/global.css';


export default function NavigationBar() {
  const [mode, setMode] = useState('light');

  const toggleMode = () => {
    var root = document.querySelector(':root');
    var rootStyle = getComputedStyle(root);

    if(rootStyle.getPropertyValue('--Foreground--') === 'black'){
      root.style.setProperty('--Foreground--', 'white');
      root.style.setProperty('--Background--', 'black');
      setMode('dark');
    }else{
      root.style.setProperty('--Foreground--', 'black');
      root.style.setProperty('--Background--', 'white');
      setMode('light');
    }
  }

  return (
    <>
      <div className={navStyle.navbarDesign}>
        <div className={navStyle.logo}>
          <span className={navStyle.world}>World</span>
          <span className={navStyle.coder}>Coder</span>
          <span className={navStyle.master}>Master</span></div>
        <div className={navStyle.theme}>
          <i onClick={toggleMode} className={mode === 'light' ? `fa fa-sun ${navStyle.sunThemeIcon}` : `fa fa-moon ${navStyle.moonThemeIcon}`}></i>
        </div>
        <ul className={navStyle.listItems}>
          <li><Link className={navStyle.link} to="/">Home</Link></li>
          <li><Link className={navStyle.link} to="/service">Service</Link></li>
          <li><Link className={navStyle.link} to="/blog">Blog</Link></li>
          <li><Link className={navStyle.link} to="/about">About</Link></li>
          <li><Link className={navStyle.link} to="/">Login</Link></li>
        </ul>
        <div className={navStyle.searchGroup}>
          <input type="search" name="" id="" className={navStyle.navbarSearch} />
          <button className={navStyle.navbarSearchBtn}>Search</button>
        </div>
      </div>
    </>
  )
}