Website dark mode (CSS inside!)

[alystair]

Disliked being blinded at night, so I put together a custom style for redbeanphp.com that:

• allows you to modify your base CSS as you see fit and the dark version will adapt along with it (mostly) due to my personal trick of combined use of filter inversion & hue rotation.
• uses a new media selector that enables dark mode only on systems that prefer dark mode

If you dislike the <code> block colors, simply add code { filter:hue-rotate( 0deg ); } and tweek degrees until happy. Same goes for other base elements such as <a> etc etc.

@media (prefers-color-scheme:dark) {
    .content { filter:hue-rotate(60deg) invert(); }
    .content h1::after, .content h2::after {filter:invert() hue-rotate(-60deg); }
    .top ul {z-index:1; background:#5f1207}
    .footblock {filter:hue-rotate(-60deg) invert(); background:#333}
    .logos a { background-color:#000 }
    .note { filter:brightness(.6) invert() hue-rotate(-60deg); }
    .content img,
    .content input[type="image"] { filter:brightness(.8) hue-rotate(-60deg)  invert(); }
}

Enjoy! 🦉

[gabordemooij]

While useful, closing this now because this is not an issue. If you like I can host this snippet for you on the RedBeanPHP site or we can add this as a stylesheet.

[alystair]

I would have done a PR but the website itself is not part of the repo, only the manual so I cannot tweak the stylesheet. You're the boss - so it's your discretion what to do with it, although I'd recommend appending to existing stylesheet.

[gabordemooij]

Added to stylesheet of website. I have no idea how to test this btw ;-) (I am on Linux)

[alystair]

Hah! Well, at least on Windows if you change your desktop theme to 'dark' it also does so on the website - I guess the same works on OSX?

I've attached a screenshot to the initial comment for reference.

[gabordemooij]

I am on Linux, turns out it does not exist here ;-)

[gabordemooij]

Anyway, I don't care, if it makes people happy, I am fine with that. I personally do not really care.

[gabordemooij]

I love the way you use the hue-trick though, saves a lot of css coding.

[alystair]

Yep I use it for most of my local dark themes. The gotcha is ensuring you re-invert/unbrighten certain elements like photos so they don't look unusual.

Going to close this now - here are some ways to test it without messing with desktop theme (that also work in Linux):

For Chrome/Chromium use the DevTools rendering tab:

For Firefox use ui.systemUsesDarkTheme flag under about:config

Cheers Gabor, till next time! If you have any fun CSS related questions even outside the scope of the project feel free to contact me, I'm a frontend nerd 🤓

[gabordemooij]

Ah I have seen it myself now, wow fun ;-) that option is seriously hidden in Chrome ;-)