Merge 5a226f5b37 into 64f5dd942c
This commit is contained in:
Mario Pietsch
GitHub
commit
2293f4c22f
|
|
@ -57,6 +57,8 @@ LayoutSwitcher/Caption: Layout
|
|||
LoadedModules/Caption: Loaded Modules
|
||||
LoadedModules/Hint: These are the currently loaded tiddler modules linked to their source tiddlers. Any italicised modules lack a source tiddler, typically because they were setup during the boot process.
|
||||
Palette/Caption: Palette
|
||||
Palette/Config/DefaultDark/Caption: Dark palette
|
||||
Palette/Config/DefaultLight/Caption: Light palette
|
||||
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
|
||||
|
|
@ -65,8 +67,13 @@ Palette/Editor/Prompt/Modified: This shadow palette has been modified
|
|||
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 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
|
||||
Palette/Switcher/Heading: Switch Palette
|
||||
Parsing/Caption: Parsing
|
||||
Parsing/Hint: Here you can globally disable/enable wiki parser rules. For changes to take effect, save and reload your wiki. Disabling certain parser rules can prevent <$text text="TiddlyWiki"/> from functioning correctly. Use [[safe mode|https://tiddlywiki.com/#SafeMode]] to restore normal operation.
|
||||
Parsing/Block/Caption: Block Parse Rules
|
||||
|
|
|
|||
|
|
@ -37,12 +37,14 @@ exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
|
|||
infoTiddlerFields.push({title: "$:/info/browser/screen/width", text: window.screen.width.toString()});
|
||||
infoTiddlerFields.push({title: "$:/info/browser/screen/height", text: window.screen.height.toString()});
|
||||
// Dark mode through event listener on MediaQueryList
|
||||
var mqList = window.matchMedia("(prefers-color-scheme: dark)"),
|
||||
getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};};
|
||||
infoTiddlerFields.push(getDarkModeTiddler());
|
||||
mqList.addListener(function(event) {
|
||||
updateInfoTiddlersCallback([getDarkModeTiddler()]);
|
||||
});
|
||||
var mqList = window.matchMedia("(prefers-color-scheme: dark)"),
|
||||
getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};};
|
||||
infoTiddlerFields.push(getDarkModeTiddler());
|
||||
mqList.addEventListener("change", function(event){
|
||||
updateInfoTiddlersCallback([getDarkModeTiddler()]);
|
||||
// activate all actions tagged $:/tags/DarkLightChangeActions
|
||||
$tw.rootWidget.invokeActionsByTag("$:/tags/DarkLightChangeActions",event,{"dark-mode":mqList.matches ? "yes" : "no"});
|
||||
});
|
||||
// Language
|
||||
infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,28 @@ title: $:/core/ui/ControlPanel/Palette
|
|||
tags: $:/tags/ControlPanel/Appearance
|
||||
caption: {{$:/language/ControlPanel/Palette/Caption}}
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/Palette/
|
||||
\procedure lingo-base() $:/language/ControlPanel/Palette/
|
||||
\whitespace trim
|
||||
|
||||
{{$:/snippets/paletteswitcher}}
|
||||
\procedure paletteEditorButton()
|
||||
<% if [{$:/state/ShowPaletteEditor}!match[yes]] %>
|
||||
<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
|
||||
<% else %>
|
||||
<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
|
||||
{{$:/PaletteManager}}
|
||||
<% endif %>
|
||||
\end
|
||||
|
||||
<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
|
||||
{{$:/core/ui/ControlPanel/Palette/DarkLightConfig}}
|
||||
|
||||
<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
|
||||
<% if [{$:/config/palette/enable-light-dark-detection}match[yes]] %>
|
||||
<<paletteEditorButton>>
|
||||
<% else %>
|
||||
|
||||
</$reveal>
|
||||
!! <<lingo "Switcher/Heading">>
|
||||
|
||||
<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
|
||||
{{$:/snippets/paletteswitcher}}
|
||||
|
||||
<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
|
||||
{{$:/PaletteManager}}
|
||||
|
||||
</$reveal>
|
||||
<<paletteEditorButton>>
|
||||
|
||||
<% endif %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
title: $:/core/ui/ControlPanel/Palette/DarkLightConfig
|
||||
|
||||
\procedure lingo-base() $:/language/ControlPanel/Palette/
|
||||
\procedure config-dark-light() $:/config/palette/enable-light-dark-detection
|
||||
\whitespace trim
|
||||
|
||||
!! <<lingo "Picker/Heading">>
|
||||
|
||||
<$checkbox tiddler=<<config-dark-light>>
|
||||
field="text"
|
||||
checked="yes"
|
||||
unchecked="no"
|
||||
default="no"
|
||||
>
|
||||
<span class="tc-tiny-gap-left tc-small-gap-right"><<lingo "Picker/Enable">></span>
|
||||
<$link to=<<config-dark-light>>>
|
||||
{{$:/core/images/open-window|12}}
|
||||
</$link>
|
||||
</$checkbox>
|
||||
|
||||
<!-- This section is animated, so users do not loose focus -->
|
||||
<$reveal type="match" state=<<config-dark-light>> text="yes" retain="yes" animate="yes">
|
||||
|
||||
<<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" 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,4 @@
|
|||
caption: {{$:/language/ControlPanel/Palette/Config/DefaultDark/Caption}}
|
||||
title: $:/config/palette/default-dark
|
||||
|
||||
$:/palettes/GruvboxDark
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
caption: {{$:/language/ControlPanel/Palette/Config/DefaultLight/Caption}}
|
||||
title: $:/config/palette/default-light
|
||||
|
||||
$:/palettes/Vanilla
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
tags: $:/tags/Global
|
||||
title: $:/core/macros/palette-picker
|
||||
|
||||
\whitespace trim
|
||||
|
||||
\procedure palette-info(tiddler)
|
||||
\procedure tv-wikilinks() no
|
||||
<$tiddler tiddler={{{ [<tiddler>get[text]] }}} >
|
||||
''{{!!name}}'' <span class="tc-tiny-gap">-</span> {{!!description}}
|
||||
{{||$:/snippets/currpalettepreview}}
|
||||
</$tiddler>
|
||||
\end
|
||||
|
||||
\procedure palette-picker(tiddler, postFilter, style)
|
||||
<div class="tc-popup-keep" style="position:relative;">
|
||||
<$button
|
||||
popup=`$:/state/popup/$(tiddler)$`
|
||||
tooltip={{$:/language/Buttons/Palette/Hint}}
|
||||
aria-label={{$:/language/Buttons/Palette/Caption}}
|
||||
class=<<tv-config-toolbar-class>>
|
||||
selectedClass="tc-selected"
|
||||
>
|
||||
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
|
||||
{{$:/core/images/palette}}
|
||||
</$list>
|
||||
<$list filter="[<tv-config-toolbar-text>match[yes]]">
|
||||
<span class="tc-btn-text">
|
||||
<$text text={{$:/language/Buttons/Palette/Caption}}/>
|
||||
</span>
|
||||
</$list>
|
||||
</$button>
|
||||
<$reveal state=`$:/state/popup/$(tiddler)$`
|
||||
type="popup"
|
||||
position="belowleft"
|
||||
positionAllowNegative="yes"
|
||||
tag="div"
|
||||
class="tc-drop-down"
|
||||
style=`$(style)$`
|
||||
>
|
||||
<$transclude $tiddler="$:/snippets/paletteswitcher" config=<<tiddler>> postFilter=<<postFilter>> />
|
||||
</$reveal>
|
||||
</div>
|
||||
\end
|
||||
|
|
@ -1,19 +1,32 @@
|
|||
title: $:/snippets/paletteswitcher
|
||||
|
||||
\parameters (palette:"$:/palette" config:"" postFilter:"")
|
||||
\whitespace trim
|
||||
<$linkcatcher to="$:/palette">
|
||||
<div class="tc-chooser">
|
||||
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]">
|
||||
<$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
|
||||
<div class=<<cls>>>
|
||||
<$link to={{!!title}}>
|
||||
''<$view field="name" format="text"/>''
|
||||
 - 
|
||||
<$view field="description" format="text"/>
|
||||
{{||$:/snippets/currpalettepreview}}
|
||||
</$link>
|
||||
</div>
|
||||
</$set>
|
||||
</$list>
|
||||
</div>
|
||||
|
||||
\procedure catchActions()
|
||||
<$action-setfield $tiddler=<<palette>> $field=text text=<<navigateTo>>/>
|
||||
<$list filter="[<config>!is[blank]]">
|
||||
<$action-setfield $tiddler=<<config>> text=<<navigateTo>>/>
|
||||
</$filter>
|
||||
\end
|
||||
|
||||
<$linkcatcher actions=<<catchActions>>>
|
||||
<div class="tc-chooser">
|
||||
<$let pre={{{ [<palette>get[text]] }}} >
|
||||
<$list filter=`[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]] $(postFilter)$`>
|
||||
<$set name="class" filter="[all[current]prefix<pre>]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
|
||||
<div class=<<class>> >
|
||||
<$link to={{!!title}}>
|
||||
''<$view field="name" format="text"/>''
|
||||
 - 
|
||||
<$view field="color-scheme" format="text"/>
|
||||
 - 
|
||||
<$view field="description" format="text"/>
|
||||
{{||$:/snippets/currpalettepreview}}
|
||||
</$link>
|
||||
</div>
|
||||
</$set>
|
||||
</$list>
|
||||
</$let>
|
||||
</div>
|
||||
</$linkcatcher>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
created: 20231101120147664
|
||||
modified: 20240303191156570
|
||||
tags: Features
|
||||
title: DarkLightChangeActions
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
!! ~ControlPanel Palette
|
||||
|
||||
Manual dark / light mode handling can be activated in the $:/ControlPanel ''-> Appearence -> Palette'' tab or with the checkbox and configuration below.
|
||||
|
||||
<$let tv-adjust-heading-level="1">
|
||||
|
||||
{{$:/core/ui/ControlPanel/Palette/DarkLightConfig}}
|
||||
</$let>
|
||||
|
||||
!! 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 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.
|
||||
|
||||
!!! Variable
|
||||
|
||||
<<.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 |
|
||||
|
||||
!!! Examples
|
||||
|
||||
Examples, how to handle dark / light events can be found at: [[DarkLightChangeActions (Examples)]]
|
||||
|
||||
|
||||
Currently the following tiddlers are tagged ~$:/tags/DarkLightChangeActions:
|
||||
|
||||
<<list-links filter:"[tag[$:/tags/DarkLightChangeActions]]" emptyMessage:"none">>
|
||||
|
||||
Currently the following tiddlers are tagged ~$:/tags/StartupAction/Browser:
|
||||
|
||||
<<list-links filter:"[tag[$:/tags/StartupAction/Browser]]" emptyMessage:"none">>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
caption: $:/tags/DarkLightChangeActions
|
||||
created: 20231101115650094
|
||||
description: marks actions executed on dark / light mode changes
|
||||
modified: 20231101120653921
|
||||
tags: SystemTags
|
||||
title: SystemTag: $:/tags/DarkLightChangeActions
|
||||
|
||||
The [[system tag|SystemTags]] `$:/tags/DarkLightChangeActions` marks actions executed on dark / light mode changes.
|
||||
|
||||
* <<.from-version "5.3.4">> DarkLightChangeActions
|
||||
* $:/info/darkmode
|
||||
Loading…
Reference in New Issue