There are a few open issues on the IFDB bug/suggestion tracker about how to handle dark mode in general. I’m reposting them here just to get people’s thoughts:
Refactor dark mode to avoid copying and pasting styles #884
We have a bunch of styles in
ifdb.cssunder a@media (prefers-color-scheme: dark)media rule.But many users don’t use
prefers-color-scheme, and instead prefer to manually set dark mode on IFDB. Unfortunately, the only way to do that is to use a custom stylesheet; overwhelmingly, the most popular dark mode stylesheet is Midnight.That means that when we fix stuff in dark mode, a moderator has to login as MJR and manually edit the Midnight style sheet, copying and pasting the current values from
ifdb.css.I can think of a few ways to handle this:
- We could special case Midnight, and write code to make it automatically use whatever’s in the dark mode section of
ifdb.css- We could set a
darkclass on the<html>element in JS in the<head>if the user prefers dark mode and/or if the user has selected Midnight. Then,ifdb.csscould stop using a@mediarule and just check for the presence of thedarkclass, and we could just replace the contents of Midnight with a comment or something.- We could add a user preference for dark mode Add a user preference for dark mode #669 and then switch existing Midnight users to the user preference. (But, is this practically different from the second option, above?)
Add a user preference for dark mode · Issue #669 · iftechfoundation/ifdb (github.com)
Apropos #757, in #74 we’ve added autodetected dark mode.
But now there’s no way to opt out of dark mode if your browser is set to “prefer” dark mode except to use a custom stylesheet.
Furthermore, due to the way I’ve implemented dark mode, that would actually be a pretty tricky stylesheet to write; you’d have to go through and manually undo all of the changes here ifdb/www/ifdb.css at main · iftechfoundation/ifdb · GitHub
Therefore, we should have a user preference to opt in/out of dark mode.