Skip to content
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

Merged
merged 1 commit into from
Mar 26, 2020
Merged

Added dark mode #4

merged 1 commit into from
Mar 26, 2020

Conversation

aembleton
Copy link

No description provided.

Copy link
Owner

@andybrewer andybrewer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome -- love it!

@andybrewer andybrewer merged commit 39739f0 into andybrewer:master Mar 26, 2020
@andybrewer
Copy link
Owner

@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!

@jimmywarting
Copy link

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.

@andybrewer
Copy link
Owner

@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.

@jimmywarting
Copy link

jimmywarting commented Sep 30, 2021

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;
}

@andybrewer
Copy link
Owner

Yes, but I don't want to clutter MVP.css with classes

@jimmywarting
Copy link

then only add it to your demo website with a style object or something?

@andybrewer
Copy link
Owner

@jimmywarting Good idea, I was overthinking it :)

It's live here: https://andybrewer.github.io/mvp/

@jimmywarting
Copy link

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 😅
guess it needs a toggle between light/dark and not dark/undefined :P

@jimmywarting
Copy link

There are also ways you can change css variables using javascript (think it was something with style.setProperty() or something )

@andybrewer
Copy link
Owner

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants