dark light mode - more docs explaining how to supress dirty flag
This commit is contained in:
pmario
parent
58541b6dd3
commit
5a226f5b37
|
|
@ -59,7 +59,6 @@ LoadedModules/Hint: These are the currently loaded tiddler modules linked to the
|
|||
Palette/Caption: Palette
|
||||
Palette/Config/DefaultDark/Caption: Dark palette
|
||||
Palette/Config/DefaultLight/Caption: Light palette
|
||||
Palette/Config/Detection/Caption: Detect Browser Ligh/Dark Setting
|
||||
Palette/Editor/Clone/Caption: clone
|
||||
Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
|
||||
Palette/Editor/Delete/Hint: delete this entry from the current palette
|
||||
|
|
@ -69,8 +68,8 @@ Palette/Editor/Prompt: Editing
|
|||
Palette/Editor/Reset/Caption: reset
|
||||
Palette/HideEditor/Caption: hide editor
|
||||
Palette/Picker/Prompt: The following settings will be used to switch between light and dark palettes.<br><ul><li>The defaults can be changed using the palette {{$:/core/images/palette|16px}} button</li><li>Select a palette-preview to activate it.</li><li>Automatic selection can be configured using [[custom actions|DarkLightChangeActions]]. See: [[DarkLightChangeActions|https://tiddlywiki.com/#DarkLightChangeActions]]</li></ul>
|
||||
Palette/Picker/Enable: Enable Light/Dark Mode Handling
|
||||
Palette/Picker/Heading: Light/Dark Mode Configuraton
|
||||
Palette/Picker/Enable: Enable Dark/Light Mode Handling
|
||||
Palette/Picker/Heading: Dark/Light Mode Configuraton
|
||||
Palette/Picker/ShowAllPalettes: Show all palettes
|
||||
Palette/Prompt: Current palette:
|
||||
Palette/ShowEditor/Caption: show editor
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
|
|||
<% endif %>
|
||||
\end
|
||||
|
||||
{{$:/core/ui/ControlPanel/Palette/LightDarkConfig}}
|
||||
{{$:/core/ui/ControlPanel/Palette/DarkLightConfig}}
|
||||
|
||||
<% if [{$:/config/palette/enable-light-dark-detection}match[yes]] %>
|
||||
<<paletteEditorButton>>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
title: $:/core/ui/ControlPanel/Palette/LightDarkConfig
|
||||
title: $:/core/ui/ControlPanel/Palette/DarkLightConfig
|
||||
|
||||
\procedure lingo-base() $:/language/ControlPanel/Palette/
|
||||
\procedure config-dark-light() $:/config/palette/enable-light-dark-detection
|
||||
|
|
@ -24,7 +24,7 @@ title: $:/core/ui/ControlPanel/Palette/LightDarkConfig
|
|||
<<lingo "Picker/Prompt">>
|
||||
|
||||
|tc-first-col-min-width tc-first-link-nowrap|k
|
||||
|<$link to="$:/config/palette/default-light" >{{$:/config/palette/default-light!!caption}}</$link> |<$transclude $tiddler="$:/snippets/paletteswitcher" palette=<<tiddler>> postFilter="+[{$:/config/palette/default-light}]" /> | <<palette-picker tiddler:"$:/config/palette/default-light" postFilter:":filter[color-scheme[light]]" >> |
|
||||
|<$link to="$:/config/palette/default-dark">{{$:/config/palette/default-dark!!caption}} </$link>|<$transclude $tiddler="$:/snippets/paletteswitcher" palette=<<tiddler>> postFilter="+[{$:/config/palette/default-dark}]" /> | <<palette-picker tiddler:"$:/config/palette/default-dark" postFilter:":filter[color-scheme[dark]]">> |
|
||||
|<$link to="$:/config/palette/default-light" >{{$:/config/palette/default-light!!caption}}</$link> |<$transclude $tiddler="$:/snippets/paletteswitcher" postFilter="+[{$:/config/palette/default-light}]" /> | <<palette-picker tiddler:"$:/config/palette/default-light" postFilter:":filter[color-scheme[light]]" >> |
|
||||
|<$link to="$:/config/palette/default-dark">{{$:/config/palette/default-dark!!caption}} </$link>|<$transclude $tiddler="$:/snippets/paletteswitcher" postFilter="+[{$:/config/palette/default-dark}]" /> | <<palette-picker tiddler:"$:/config/palette/default-dark" postFilter:":filter[color-scheme[dark]]">> |
|
||||
|
||||
</$reveal>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
created: 20240303170824709
|
||||
modified: 20240303182658789
|
||||
tags:
|
||||
title: DarkLightChangeActions (Examples)
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\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={{{ [{$:/info/darkmode}match[yes]then[$:/config/palette/default-dark]else[$:/config/palette/default-light]] }}}>
|
||||
<$action-setfield $tiddler="$:/palette" text={{{ [<default>get[text]] }}}/>
|
||||
</$let>
|
||||
</$reveal>
|
||||
\end
|
||||
|
||||
\procedure createLightDarkSwitcher()
|
||||
<% if [<lightDarkSwitcherTitle>!has[text]] %>
|
||||
<$action-createtiddler
|
||||
$basetitle=<<lightDarkSwitcherTitle>>
|
||||
text=<<dynamicLightDarkActionTemplate>>
|
||||
caption= "Dynamically detect browser or OS setting"
|
||||
code-body= "yes"
|
||||
tags= "$:/tags/DarkLightChangeActions"
|
||||
/>
|
||||
<$action-navigate $to=<<lightDarkSwitcherTitle>>/>
|
||||
<% else %>
|
||||
<$action-navigate $to=<<lightDarkSwitcherTitle>>/>
|
||||
<% endif %>
|
||||
\end
|
||||
|
||||
\procedure createStartupSwitcher()
|
||||
<% if [<startupSwitcherTitle>!has[text]] %>
|
||||
<$action-createtiddler
|
||||
$basetitle=<<startupSwitcherTitle>>
|
||||
text=<<startupLightDarkActionTemplate>>
|
||||
caption= "Detect browser or OS setting on startup"
|
||||
code-body= "yes"
|
||||
tags= "$:/tags/StartupAction/Browser"
|
||||
/>
|
||||
<$action-navigate $to=<<startupSwitcherTitle>>/>
|
||||
<% else %>
|
||||
<$action-navigate $to=<<startupSwitcherTitle>>/>
|
||||
<% endif %>
|
||||
\end
|
||||
|
||||
!! Detect Light / Dark Setting on Startup
|
||||
|
||||
For most usecases, it will be enough to detect the browser or OS setting on wiki startup.
|
||||
|
||||
Also see: [[StartupActions]] and [[SystemTag: $:/tags/StartupAction/Browser]]
|
||||
|
||||
<<.warning """For startup actions, it is important to use the $:/info/darkmode tiddler<br>Changing the $:/palette tiddler at startup will ''not'' trigger the [[dirty flag|SavingMechanism]].""">>
|
||||
|
||||
Currently the following tiddlers are tagged ~$:/tags/StartupAction/Browser:
|
||||
|
||||
<<list-links filter:"[tag[$:/tags/StartupAction/Browser]]" emptyMessage:"none">>
|
||||
|
||||
<$button actions=<<createStartupSwitcher>> >Create <<startupSwitcherTitle>> example 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>
|
||||
|
||||
|
||||
!! Dynamically Detect Browser or OS Light / Dark Theme Changes
|
||||
|
||||
Also see: [[DarkLightChangeActions]] and [[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.""">>
|
||||
|
||||
<<.warning """Changing the $:/palette tiddler dynamically ''will trigger'' the [[dirty flag|SavingMechanism]]. If you want to avoid this behaviour, you will need to add `-[[$:/palette]]` to the the $:/config/SaverFilter as described at [[SavingMechanism]]""">>
|
||||
|
||||
The following example dynamically defines the $:/palette tiddler based on the browser or OS dark / light mode setting. Palettes are tagged: <<tag "$:/tags/Palette">> -- The tag-pill dropdown can be used to see all possible palette tiddlers.
|
||||
|
||||
Currently the following tiddlers are tagged ~$:/tags/DarkLightChangeActions:
|
||||
|
||||
<<list-links filter:"[tag[$:/tags/DarkLightChangeActions]]" emptyMessage:"none">>
|
||||
|
||||
<$button actions=<<createLightDarkSwitcher>> >Create <<lightDarkSwitcherTitle>> example tiddler</$button>
|
||||
|
||||
```
|
||||
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>
|
||||
|
|
@ -1,103 +1,44 @@
|
|||
created: 20231101120147664
|
||||
modified: 20240215135640660
|
||||
modified: 20240303191156570
|
||||
tags: Features
|
||||
title: DarkLightChangeActions
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\procedure lightDarkSwitcherTitle() _/dynamic/light-dark/detection
|
||||
\procedure startupSwitcherTitle() _/startup/light-dark/detection
|
||||
!! ~ControlPanel Palette
|
||||
|
||||
\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
|
||||
Manual dark / light mode handling can be activated in the $:/ControlPanel ''-> Appearence -> Palette'' tab or with the checkbox and configuration below.
|
||||
|
||||
\procedure startupLightDarkActionTemplate()
|
||||
<$reveal type="match" stateTitle="$:/config/palette/enable-light-dark-detection" text="yes">
|
||||
<$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>
|
||||
\end
|
||||
<$let tv-adjust-heading-level="1">
|
||||
|
||||
\procedure createLightDarkSwitcher()
|
||||
<% if [<lightDarkSwitcherTitle>!has[text]] %>
|
||||
<$action-createtiddler
|
||||
$basetitle=<<lightDarkSwitcherTitle>>
|
||||
text=<<dynamicLightDarkActionTemplate>>
|
||||
caption= "{{$:/language/ControlPanel/Palette/Config/Detection/Caption}}"
|
||||
code-body= "yes"
|
||||
tags= "$:/tags/DarkLightChangeActions"
|
||||
/>
|
||||
<$action-navigate $to=<<lightDarkSwitcherTitle>>/>
|
||||
<% else %>
|
||||
<$action-navigate $to=<<lightDarkSwitcherTitle>>/>
|
||||
<% endif %>
|
||||
\end
|
||||
{{$:/core/ui/ControlPanel/Palette/DarkLightConfig}}
|
||||
</$let>
|
||||
|
||||
\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
|
||||
!! Palette Modes Detection
|
||||
|
||||
<<.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. """>>
|
||||
|
||||
* 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
|
||||
* Actions tagged <<tag $:/tags/StartupAction/Browser>> are executed when the wiki is started. More info can be found at StartupActions and examples here.
|
||||
* <<.from-version "5.3.4">> Actions tagged <<tag "$:/tags/DarkLightChangeActions">> are executed whenever the browser or OS dark / light setting is changed.
|
||||
|
||||
!! Variables
|
||||
!!! Variable
|
||||
|
||||
The following variable is defined for actions tagged $:/tags/DarkLightChangeActions
|
||||
<<.from-version "5.3.4">>
|
||||
|
||||
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 |
|
||||
|
||||
!! Example - Detect Browser or OS Light / Dark Theme Changes
|
||||
!!! Examples
|
||||
|
||||
See: [[SystemTag: $:/tags/DarkLightChangeActions]]
|
||||
Examples, how to handle dark / light events can be found at: [[DarkLightChangeActions (Examples)]]
|
||||
|
||||
<<.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. """>>
|
||||
|
||||
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.
|
||||
Currently the following tiddlers are tagged ~$:/tags/DarkLightChangeActions:
|
||||
|
||||
<$button actions=<<createLightDarkSwitcher>> >Create <<lightDarkSwitcherTitle>> tiddler</$button>
|
||||
<<list-links filter:"[tag[$:/tags/DarkLightChangeActions]]" emptyMessage:"none">>
|
||||
|
||||
```
|
||||
title: _/dynamic/light-dark/detection
|
||||
caption: {{$:/language/ControlPanel/Palette/Config/Detection/Caption}}
|
||||
code-body: yes
|
||||
tags: $:/tags/DarkLightChangeActions
|
||||
```
|
||||
Currently the following tiddlers are tagged ~$:/tags/StartupAction/Browser:
|
||||
|
||||
<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>
|
||||
<<list-links filter:"[tag[$:/tags/StartupAction/Browser]]" emptyMessage:"none">>
|
||||
Loading…
Reference in New Issue