Light/Dark mode switch refactor: toggle on `<html>`, use CSS vars - Githubissues

InputUsername / zola-hook

A clean and simple personal site/blog theme for the Zola static site generator

https://inputusername.github.io/zola-hook/

35 stars 18 forks source link

Light/Dark mode switch refactor: toggle on `<html>`, use CSS vars #11

Closed peterkos closed 3 weeks ago

peterkos commented 8 months ago

Background

Hello!

I tried using the theme, but the way dark/light mode was implemented made it hard to customize variables:

Everything was nested in body.dark, requiring all styles to be duplicated across that and body
SASS variables were separate for light/dark and reused

// Before
body.dark-mode {
    a, a:link, a:visited {
    color: orange;
    }
}

// After
a, a:link, a:visited {
    color: orange;
}

Variables can now be overridden too:

:root.dark-mode {
    --accent-color: orange;
}

Contents

Replaced SASS vars with CSS var(--...) to allow overriding
- One set of variables, set on :root.dark-mode or :root.light-mode
- (prevents all style code from being duplicated!)
No longer nesting all styles in body
Removed @media (prefers-dark...), since JS logic already handles this

peterkos commented 8 months ago

Reviewing in split veiw vs. unified may be easier here, git diff went crazy 😆

Also, everything in _theme.scss can now be put into style.css too! #less duplication

InputUsername commented 3 weeks ago

Finally had some more time to look at this (better late than never right :sweat_smile:) - made it work without JS and fixed some inconsistencies (link hover, table styles). Thanks @peterkos!