With system wide dark modes becoming commonplace, I took the effort to tweak the color scheme of my blog and added a dark mode specific one using prefers-color-scheme in CSS. I also toyed around the idea of adding a user toggle using JavaScript per instructions here, but ultimately decided against it because of my (totally unjustified and groundless) distaste towards the language.
Color Usage
Light Theme
Dark Theme
Accent
#700000
#8fffff
Background
#f7f3e3
#080c1c
Text
#2e2d2b
#d1d2d4
Code Background
#e3dacb
#1c2534
Border 1
#e7e3d3
#181c2c
Border 2
#d7d3c3
#282c3c
Writing CSS is a such tiring endeavor, but on the bright side, picking colors is a surprisingly relaxing activity. The light mode color scheme now has reduced contrast, and I updated the isso style sheets with matching colors. Yes, I only inverted the colors in dark mode and did not reduce the font weights because of the peculiar way in which human vision work. Part of me already screams heresy when I look at the color codes formed by three numbers that seem to have no connection whatsoever—they are like dissonant chords that cause itches in brain—so I need them to at least sum up to a nice number.
Wissen ist Nacht!
Comments
aclef6dd1
I've been using Manjaro exclusively for at least a year(yeah I'm not quite nerd enough to try Arch in its original taste or even Gentoo XD), One thing I love is I can easily invert the color of window with shortcuts. Together with many other pros I can finally say I love linux for its own sake but not out of my hatred for Microsoft. LOL.
How is LaTeX rendering implemented for your blog? Does it work well with dare mode?
shimmy1996 ✦
Interesting - is that a function of the desktop environment that you use? Does it handle images correctly?
For LaTeX rendering, I'm using KaTeX, which is supposedly faster than the more popular MathJax. It respects the html color tags so it works fine in dark mode. I haven't figured out an efficient way to include my LaTeX macros so the only example of posts using LaTeX so far is the LaTeX logo here.
aclef6dd1
For KDE out of the box there's an invert option in desktop effect settings, you can specify different hot key for window inversion or global inversion.
For Cinnamon you can install a extension in it's own extension market that can do the same thing.
For other gnome derivatives, install xcalib and register a hot key to 'xcalib -i -c' can handle global inversion ,still don't know how to do window-wise inversion.
Because it's inversion on the level of window composition so images will also be inverted, it's okay for me though. For webpages there's a firefox plugin that can handle image aware inversion.
shimmy1996 ✦
Intriguing - I'm running i3/sway on my setup and use system-wide dark mode via gtk-application-prefer-dark-theme config. It's finicky in that its effectiveness depends on application support. In context of website dark modes, Firefox picks that setting up and loads the correct CSS but Chromium doesn't.