TiddlyWiki5/editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid

41 lines
1.6 KiB
Plaintext

created: 20231101120147664
modified: 20240125155840177
tags: Features
title: DarkLightChangeActions
type: text/vnd.tiddlywiki
<<.from-version "5.3.4">> Actions tagged <<tag "$:/tags/DarkLightChangeActions">> are executed whenever the browser or OS dark / light setting is changed.
<<.tip """Be aware that the browser setting can be independent from the OS setting.<br>
If the browser settings are set to "System theme - auto" for ~FireFox or "System default" for Chrome-like browsers, the OS setting will be shown. """>>
Also see [[SystemTag: $:/tags/DarkLightChangeActions]]
!! Variables
The following variable is defined for all actions DarkLightChangeActions
| Variables | Description |h
|`dark-mode` |`yes` or `no` depending on the browser or OS setting |
!! InfoMechanism
<<.warning """It is important to use the variable `dark-mode`, since the system info tiddler $:/info/darkmode will be ''updated after'' the actions have been executed. """>>
!! Example
The following example defines the $:/palette tiddler based on the dark / light mode setting. Palettes are tagged: <<tag "$:/tags/Palette">> -- The tag-pill dropdown can be used to see all possible palette tiddlers.
```
title: _/startup/light-dark/detection
caption: {{$:/language/ControlPanel/Palette/Config/Detection/Caption}}
tags: $:/tags/DarkLightChangeActions
<$reveal type="match" stateTitle="$:/config/palette/enable-light-dark-detection" text="yes">
<$let default={{{ [<dark-mode>match[yes]then[$:/config/palette/default-dark]else[$:/config/palette/default-light]] }}}>
<$action-setfield $tiddler="$:/palette" text={{{ [<default>get[text]] }}}/>
</$let>
</$reveal>
```