mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

dark/light theme -- add example for browser startup detection

This commit is contained in:
pmario 2024-02-15 15:04:37 +01:00
parent 336c111627
commit e0408b071f
1 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid
View File

@ -1,14 +1,23 @@
created: 20231101120147664
modified: 20240125202358139
modified: 20240215135640660
tags: Features
title: DarkLightChangeActions
type: text/vnd.tiddlywiki
\procedure lightDarkSwitcherTitle() _/startup/light-dark/detection
\procedure lightDarkSwitcherTitle() _/dynamic/light-dark/detection
\procedure startupSwitcherTitle() _/startup/light-dark/detection
\procedure dynamicLightDarkActionTemplate()
<$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>
\end
\procedure startupLightDarkActionTemplate()
<$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]] }}}>
<$let default={{{ [{$:/info/darkmode}match[yes]then[$:/config/palette/default-dark]else[$:/config/palette/default-light]] }}}>
<$action-setfield $tiddler="$:/palette" text={{{ [<default>get[text]] }}}/>
</$let>
</$reveal>
@ -18,7 +27,7 @@ type: text/vnd.tiddlywiki
<% if [<lightDarkSwitcherTitle>!has[text]] %>
<$action-createtiddler
$basetitle=<<lightDarkSwitcherTitle>>
text=<<startupLightDarkActionTemplate>>
text=<<dynamicLightDarkActionTemplate>>
caption= "{{$:/language/ControlPanel/Palette/Config/Detection/Caption}}"
code-body= "yes"
tags= "$:/tags/DarkLightChangeActions"
@ -29,36 +38,66 @@ type: text/vnd.tiddlywiki
<% endif %>
\end
<<.from-version "5.3.4">> Actions tagged <<tag "$:/tags/DarkLightChangeActions">> are executed whenever the browser or OS dark / light setting is changed.
\procedure createStartupSwitcher()
<% if [<startupSwitcherTitle>!has[text]] %>
<$action-createtiddler
$basetitle=<<startupSwitcherTitle>>
text=<<startupLightDarkActionTemplate>>
caption= "{{$:/language/ControlPanel/Palette/Config/Detection/Caption}}"
code-body= "yes"
tags= "$:/tags/StartupAction/Browser"
/>
<$action-navigate $to=<<startupSwitcherTitle>>/>
<% else %>
<$action-navigate $to=<<startupSwitcherTitle>>/>
<% endif %>
\end
<<.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]]
* Actions tagged <<tag $:/tags/StartupAction/Browser>> are executed when the wiki is started. More info can be found at StartupActions
* <<.from-version "5.3.4">> Actions tagged <<tag "$:/tags/DarkLightChangeActions">> are executed whenever the browser or OS dark / light setting is changed
!! Variables
The following variable is defined for all actions DarkLightChangeActions
The following variable is defined for actions tagged $:/tags/DarkLightChangeActions
| Variables | Description |h
|`dark-mode` |`yes` or `no` depending on the browser or OS setting |
!! InfoMechanism
!! Example - Detect Browser or OS Light / Dark Theme Changes
See: [[SystemTag: $:/tags/DarkLightChangeActions]]
<<.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.
The following examples define 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.
<$button actions=<<createLightDarkSwitcher>> >Create <<lightDarkSwitcherTitle>> tiddler</$button>
```
title: _/startup/light-dark/detection
title: _/dynamic/light-dark/detection
caption: {{$:/language/ControlPanel/Palette/Config/Detection/Caption}}
code-body: yes
tags: $:/tags/DarkLightChangeActions
```
<pre><code><$transclude $variable="dynamicLightDarkActionTemplate" $mode=block $output="text/plain" $type="text/plain" /></code></pre>
!! Example - Detect Light / Dark Setting on Startup
See: [[SystemTag: $:/tags/StartupAction/Browser]]
<<.warning """For startup actions, it is important to use the $:/info/darkmode tiddler """>>
<$button actions=<<createStartupSwitcher>> >Create <<startupSwitcherTitle>> tiddler</$button>
```
title: _/startup/light-dark/detection
caption: {{$:/language/ControlPanel/Palette/Config/Detection/Caption}}
code-body: yes
tags: $:/tags/StartupAction/Browser
```
<pre><code><$transclude $variable="startupLightDarkActionTemplate" $mode=block $output="text/plain" $type="text/plain" /></code></pre>