Change palette automatically according to browser dark mode settings

Tips & Tricks
#1

Tiddlywiki’s built-in info module can display the browser’s dark mode settings. So by judging the content of the $:/info/darkmode tiddler, you can change the palette automatically at startup.

Create the following tiddler tagged $:/tags/StartupAction can change tiddlywiki’s palette to Solarized dark at startup when browser’s dark mode is enabled. When dark mode is not enabled, it changes the palette to Solarized Light.

<$reveal type="nomatch" state="$:/info/darkmode" text="yes">
<$action-setfield $tiddler="$:/palette" $value="$:/palettes/SolarizedLight"/>
</$reveal>

<$reveal type="match" state="$:/info/darkmode" text="yes">
<$action-setfield $tiddler="$:/palette" $value="$:/palettes/SolarizedDark"/>
</$reveal>
4 Likes
#2

Instead of using $reveal, you can write this more compactly with “filtered transclusion” syntax, like this:

\define dark()  $:/palettes/SolarizedDark
\define light() $:/palettes/SolarizedLight
<$action-setfield $tiddler="$:/palette"
  text={{{ [{$:/info/darkmode}match[yes]then<dark>else<light>] }}}/>

enjoy,
-e

4 Likes
#3

Hi, see this userscript that auto switch any wiki’s palette that you visit About | Tiddlywiki Switch Theme | Userscripts | OpenUserJS
(Also a script prevent the wiki to prevent you leaving About | Tiddlywiki Prevent Prevent Leave | Userscripts | OpenUserJS )

And this technique is also in Modern.TiddlyDev/wiki/tiddlers/$__Modern.TiddlyDev_Startup.tid at master · tiddly-gittly/Modern.TiddlyDev · GitHub , have a try in Unnamed Plugin — Unfilled Description

And please review the PR add browser dark/light theme detection by pmario · Pull Request #7830 · Jermolene/TiddlyWiki5 · GitHub , so it gets merge into the core sooner.

1 Like