Why is dark/light mode not part of the package?

[marcospgp]

I wanted to make my page have light mode, just like the MVP.css landing page - but was surprised to see that the dark/light mode toggle is some custom code on top of the page and not part of MVP.css itself.

It's a little misleading if the page has light and dark mode but that is nowhere in the docs and can't actually be reproduced 😄

The styles look simple enough:

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

        body.lightMode {
            --color: #118bee;
            --color-accent: #118bee15;
            --color-bg: #fff;
            --color-bg-secondary: #e9e9e9;
            --color-link: #118bee;
            --color-secondary: #920de9;
            --color-secondary-accent: #920de90b;
            --color-shadow: #f4f4f4;
            --color-table: #118bee;
            --color-text: #000;
            --color-text-secondary: #999;
        }
    </style>

so why aren't these just part of the CSS?

[andybrewer]

The project has a philosophy of not asking the user to learn any custom class names. The code you provided is intuitive but requires documenting two class names: ‘lightMode’ and ‘darkMode’.

However, I agree that it would be helpful to allow the user to easily control dark/light mode. And custom JS seems unnecessarily complicated.

Maybe a custom attribute like ‘’ would work.

I got the idea from this post: https://ryanfeigenbaum.com/dark-mode/

I’ll work on an update.

On Fri, May 20, 2022 at 5:37 AM Marcos Pereira @.***> wrote:

I wanted to make my page have light mode, just like the MVP.css landing page - but was surprised to see that the dark/light mode toggle is some custom code on top of the page and not part of MVP.css itself.

It's a little misleading if the page has light and dark mode but that is nowhere in the docs and can't actually be reproduced 😄

The styles look simple enough:

    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;

    }

    body.lightMode {

        --color: #118bee;

        --color-accent: #118bee15;

        --color-bg: #fff;

        --color-bg-secondary: #e9e9e9;

        --color-link: #118bee;

        --color-secondary: #920de9;

        --color-secondary-accent: #920de90b;

        --color-shadow: #f4f4f4;

        --color-table: #118bee;

        --color-text: #000;

        --color-text-secondary: #999;

    }

</style>

so why aren't these just part of the CSS?

— Reply to this email directly, view it on GitHub https://github.com/andybrewer/mvp/issues/76, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAABXNK2ATAVAYKNKEDFE7TVK6BO7ANCNFSM5WPKU3ZQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Andy Brewer

[marcospgp]

I got that code straight from the website, by the way - not mine.

Maybe have two versions of the CSS, one light and one dark?

Though I believe the custom attribute may be simpler.

[Jieiku]

I just wanted to report that I implemented the code from the landing page and it does not remember the style change between page clicks.

The other links in the MVP landing page (Docs and Faq) simply scroll the page lower, at first glance I thought I had found a good solution for dark/light mode.

The code is indeed from the demo https://github.com/andybrewer/mvp/commit/12916fe3570d29661fae4d0927675940b8ab36eb but it does not remember its setting between pages.

If I work out a different solution I will try and remember to come back here and link to it.

[Giancarlos]

Why not just use a media query to detect the browsers preference? This has been a thing since Apple released it back in 2018 and I believe every major browser except IE supports it.

@media (prefers-color-scheme: dark) {
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[Jieiku]

What I have found is that to have a theme switcher (In addition to the media query) is that you either render this change server side or in the case of a static site you load the relevant code as quickly and efficiently as possible. What I ended up doing was loading my solution immediately in the head (theme.min.js) in addition to supporting css media queries https://abridge.netlify.app/

PS: You can read more about why it has to be done quickly on static pages here: https://css-tricks.com/flash-of-inaccurate-color-theme-fart/

[andybrewer]

I decided to go a different route and default to light mode since this is an MVP library and accommodating both light and dark mode is probably outside the scope of an MVP.

However, if you do want to support a user's dark mode preference, you can use <html color-mode="user"> and it will use either light or dark mode based on the user's individual browser settings. The idea came from: https://ryanfeigenbaum.com/dark-mode/

This is also documented in the FAQs on the demo page: https://andybrewer.github.io/mvp/

This should also alleviate the need to track or persist dark/light mode state across pages since it's either ignoring or respecting the browser's dark mode setting.