search

jhildenbiddle / css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
https://jhildenbiddle.github.io/css-vars-ponyfill
MIT License
1.46k stars 64 forks source link

How to switch themes without browser reload using css variables? #157

Closed kevinjn3640 closed 3 years ago

kevinjn3640 commented 3 years ago

How to switch themes without browser reload using css variables

`

const themes = { light: { color: "green" }, dark: { color: "blue" } };

if (document.documentElement.hasAttribute("data-force-color-mode", "light")) { cssVars({ variables: themes.light, }); }

if (document.documentElement.hasAttribute("data-force-color-mode", "dark")) { cssVars({ variables: themes.dark, }); }`

Please help

jhildenbiddle commented 3 years ago

@Kevinjn0123 --

You haven't specified how you want to trigger the theme switch. Here's a quick demo with one way to do it:

https://codesandbox.io/s/css-vars-ponyfill-157-jdng3