Light and Dark theme React with Less and CSS variables

PHOTO EMBED

Thu May 05 2022 07:34:24 GMT+0000 (UTC)

Saved by @Jude∗ #undefined

const LIGHT_THEME = 'light-theme';

const DARK_THEME = 'dark-theme';

​

const ThemeContext = React.createContext();

​

function ThemeWrapper({ children }) {

  const [theme, setTheme] = React.useState(LIGHT_THEME);

  

  const applyTheme = (newTheme) => {

    document.getElementById('app').className = newTheme;

    setTheme(newTheme);

  }

  

  return (

    <ThemeContext.Provider value={{ theme, applyTheme }}>

      {children}

    </ThemeContext.Provider>

  )

}

​
content_copyCOPY

https://codepen.io/kailash-sankar/pen/bGgzeQw