-
Notifications
You must be signed in to change notification settings - Fork 192
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added dark mode #4
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome -- love it!
@aembleton - I commented out dark mode because I couldn't get it to look good with the logo / images on the site. But at least those that want it can uncomment it easily. Thanks again! |
Would love it if this where enabled on your web page so it's easy to preview how it looks like, a toggle would be grate too. |
@jimmywarting is it possible to do force dark mode through JavaScript? I think you can only detect if it's enabled in the browser or not. |
A simple class that you can toggle would do it? body.darkMode {
--color: #0097fc;
--color-accent: #0097fc4f;
--color-bg: #333;
--color-bg-secondary: #555;
--color-link: #0097fc;
--color-secondary: #e20de9;
--color-secondary-accent: #e20de94f;
--color-shadow: #bbbbbb20;
--color-table: #0097fc;
--color-text: #f7f7f7;
--color-text-secondary: #aaa;
} |
Yes, but I don't want to clutter MVP.css with classes |
then only add it to your demo website with a style object or something? |
@jimmywarting Good idea, I was overthinking it :) It's live here: https://andybrewer.github.io/mvp/ |
LuL, the reason why i asked for it was b/c some device i used did not have prefer color = dark, or i wanted to see how it looked like when it was in light mode. But now on i'm on a device that has prefer dark color on by default, so even if i toggle now on the website it's always dark 😅 |
There are also ways you can change css variables using javascript (think it was something with style.setProperty() or something ) |
Good catch! I added some JS to detect if Dark Mode is currently on and then adjust the toggle appropriately. Does that work for you now? https://andybrewer.github.io/mvp/ |
No description provided.