Comments (4)
Hi @xeruf thank you for checking skelet.css
and for the suggestion.
We usually use JS to match users' preferences when necessary, We left out the @media (prefers-color-scheme: dark)
mainly because not all projects want to offer a dark version. So we leave the choice to the developer to decide whether or not to include a dark version in their project, and if they do decide, they can simply add the class to the body or use JS to toggle between dark and light versions.
if (window.matchMedia("(prefers-color-scheme:dark)").matches) document.body.classList.add('dark-mode');
If you have any suggestions on how this can be implemented without forcing every project to have a dark version by default feel free to share your thoughts here or to open a pull request.
Thanks
from skelet.
Match users' preferences
if (window.matchMedia("(prefers-color-scheme:dark)").matches) document.body.classList.add('dark-mode')
Avoid FOUC on page load
if (localStorage.getItem("dark-mode") === 'on' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme:dark)').matches)) {
document.documentElement.classList.add('dark-mode')
localStorage.setItem('dark-mode', 'on')
} else {
document.documentElement.classList.remove('dark-mode')
}
Toggle dark mode
<label for="lightBulb">Light</label>
<input id="lightBulb" type="checkbox" class="switch">
<label for="lightBulb">Dark</label>
let checkBox = document.getElementById("lightBulb");
const enableDarkMode = () => {
document.body.classList.add("dark-mode")
checkBox.checked = true;
localStorage.setItem("dark-mode", "on")
};
const disableDarkMode = () => {
document.body.classList.remove("dark-mode")
checkBox.checked = false;
localStorage.setItem("dark-mode", "off")
};
if (localStorage.getItem("dark-mode") === "on") enableDarkMode();
checkBox.addEventListener("click", () => {
if (localStorage.getItem("dark-mode") === "off") { enableDarkMode() }
else { disableDarkMode() }
});
from skelet.
Thank you, I will look into it, Skelet looks like a great project and is the only still active Skeleton fork I found :)
from skelet.
Thanks a lot. Yes, It seems like everybody jumped on the Tailwind bandwagon and nobody wants to maintain CSS frameworks anymore.
from skelet.
Related Issues (14)
- Section border and cursor HOT 1
- Misnamed box-sizing and white-space properties. Current master and 3.3 release. HOT 3
- [docs] Sections repeat themself HOT 1
- The Grid system is currently limited to columns only
- [docs] media query documentation malaligned HOT 1
- [docs] Section headers feel weird HOT 1
- Contrast for links HOT 2
- CSS Validator: Invalid Type HOT 2
- Provide NPM package HOT 3
- Custom HTML tags in React JSX? HOT 1
- Can't make triple column HOT 1
- Any way to disable ::-webkit-scrollbar-track styling HOT 1
- Here is my website! HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skelet.