Automatic palette switching based on OS light/dark mode

#1

Is it possible to automatically change a palette based on whether light or dark mode is set on a OS level?

I know how to change palettes with a button action but I want the change to happen when I switch between light/dark mode on macOS and iOS.

Config tiddler title for default light & dark palette (e.g. $:/config/palette/default-dark)
#2

Here’s an example: TW5 CPL Wiki — TiddlyWiki5 Plugin Library for TiddlyWiki Chinese Communities

Add a tiddler with $:/tags/StartupAction/Browser:

<$action-setfield $tiddler="$:/palette" $value={{{ [{$:/info/darkmode}match[yes]then[Your Dark Palette]else[Your Light Palette]] }}}/>
3 Likes
#3

Note that if you use protection against fingerprinting you will need to disable it for it to work (privacy.resistFingerprinting in firefox)

1 Like
#4

Nice, thank you!

Is it possible to have it change palette automatically when light/dark mode is toggled and not only at startup?

#5

Sorry, I’m not sure. I don’t think it can be done, unless it’s scripted in JavaScript.

2 Likes
#6

tested working on ventura and win11 arm:

in stylesheet:

/* Define colours for dark mode */
@media (prefers-color-scheme: dark) {
 .exampleclass {background:black; color:white}
}

cribbed from How To Add CSS Dark Mode To A Website - Kev Quirk

there might be a better way though!

example in use: makiaea.org
see quiz3.css (which is enabled when accessing via http )
default is dark, will respond to light mode