Switcher
🌓 The most basic CSS4 Dark ↔ Light theme switcher.
Install / Use
/learn @animify/SwitcherREADME
The most basic CSS4 Dark ↔ Light theme switcher - 🚀 by CSS4 variables & JS.
Check out the demo and swap between Light & Dark themes.
Development
Getting Started
- Clone the repository
- Go to the project directory -
cd ./Switcher - Start the project -
npm start
Theme configs
By default, the light theme will be used. Its JSON config containing all its variables is found under src/variables/lightTheme.json.
The dark theme config (src/variables/darkTheme.json) contains a map of the same keys, just with the values we want to use when the theme switches.
Switcher.js
Switcher.js (src/Switcher.js) handles the logic behind theme switching. It simply sets picks up all values from the theme configs and adds custom CSS4 variables for each one in the :root of the document.
By default, the demo loads the light theme on load:
Switcher.setTheme('light');
Deploying
The Switcher package comes prepared for you to build and deploy your changes to Netlify. Parcel will build the app for production and deploy using your Netlify config - run npm run deploy.
Issues
Found any issues with Switcher? Post an issue or PR 😎
Feel free to post enhancements in the Issues section
Licensed under MIT
