Log in Sign up

Solution to Light / Dark Mode for the Blog Template

Is there an existing solution to adding a toggle switch or using device settings for light / dark mode? I'm using the Blog template. Thank you.


2 years ago, 1 replies   developers   Edit question

I'm not using a toggle, but I do use light/dark mode for the blog template based on device settings. The best way to do it is with CSS variables in your style.css file.

@media (prefers-color-scheme: dark) {
    :root {
        --background: #2e2f33;
        --text: #D8D4D4;
        --nav: #b2b2b2;
        --date: #b2b2b2;  
        --postsum: #D8D4D4;
        --divider: #434C5E;
    }
}

Does that help?

Answered 2 years ago ยท Edit answer