TiddlyWiki · BurningTreeC · Nov 21, 2020 · Nov 21, 2020 · Nov 21, 2020 · Nov 21, 2020
diff --git a/core/language/en-GB/Buttons.multids b/core/language/en-GB/Buttons.multids
@@ -57,6 +57,8 @@ Home/Caption: home
 Home/Hint: Open the default tiddlers
 Language/Caption: language
 Language/Hint: Choose the user interface language
+LightDark/Caption: light/dark palette
+LightDark/Hint: Switch between light and dark palettes
 Manager/Caption: tiddler manager
 Manager/Hint: Open tiddler manager
 More/Caption: more

diff --git a/core/language/en-GB/ControlPanel.multids b/core/language/en-GB/ControlPanel.multids
@@ -46,7 +46,9 @@ KeyboardShortcuts/Platform/Windows: Windows platform only
 KeyboardShortcuts/Platform/NonWindows: Non-Windows platforms only
 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/AutoDarkMode/Hint: Enable automatic setting of Dark / Light Mode based on the OS configuration
 Palette/Caption: Palette
+Palette/Dark/Caption: Dark 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
@@ -55,6 +57,7 @@ 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/Light/Caption: Light Palette
 Palette/Prompt: Current palette:
 Palette/ShowEditor/Caption: show editor
 Parsing/Caption: Parsing

diff --git a/core/modules/editor/engines/framed.js b/core/modules/editor/engines/framed.js
@@ -42,7 +42,6 @@ function FramedEngine(options) {
 	this.iframeNode.style.border = "none";
 	this.iframeNode.style.padding = "0";
 	this.iframeNode.style.resize = "none";
-	this.iframeNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"tiddler-editor-background");
 	this.iframeDoc.body.style.margin = "0";
 	this.iframeDoc.body.style.padding = "0";
 	this.widget.domNodes.push(this.iframeNode);
@@ -100,7 +99,6 @@ FramedEngine.prototype.copyStyles = function() {
 	this.domNode.style.display = "block";
 	this.domNode.style.width = "100%";
 	this.domNode.style.margin = "0";
-	this.domNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"tiddler-editor-background");
 	// In Chrome setting -webkit-text-fill-color overrides the placeholder text colour
 	this.domNode.style["-webkit-text-fill-color"] = "currentcolor";
 };

diff --git a/core/modules/info/platform.js b/core/modules/info/platform.js
@@ -12,7 +12,7 @@ Initialise basic platform $:/info/ tiddlers
 /*global $tw: false */
 "use strict";
 
-exports.getInfoTiddlerFields = function() {
+exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
 	var mapBoolean = function(value) {return value ? "yes" : "no";},
 		infoTiddlerFields = [];
 	// Basics
@@ -36,6 +36,13 @@ exports.getInfoTiddlerFields = function() {
 		// Screen size
 		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()]);
+ 		});
 		// Language
 		infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""});
 	}

diff --git a/core/ui/ControlPanel/Palette.tid b/core/ui/ControlPanel/Palette.tid
@@ -4,18 +4,7 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
 
 \define lingo-base() $:/language/ControlPanel/Palette/
 
-{{$:/snippets/paletteswitcher}}
+<$checkbox tiddler="$:/config/AutoDarkMode" field="text" checked="yes" unchecked="no" default="no"> <<lingo AutoDarkMode/Hint>></$checkbox>
 
-<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
-
-</$reveal>
-
-<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
-{{$:/PaletteManager}}
-
-</$reveal>
+<<tabs "$:/core/ui/ControlPanel/Palette/Light $:/core/ui/ControlPanel/Palette/Dark" "$:/core/ui/ControlPanel/Palette/Light">>
 
diff --git a/core/ui/ControlPanel/Palette/Dark.tid b/core/ui/ControlPanel/Palette/Dark.tid
@@ -0,0 +1,23 @@
+title: $:/core/ui/ControlPanel/Palette/Dark
+caption: {{$:/language/ControlPanel/Palette/Dark/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/Palette/
+
+<$vars currPaletteTiddler="$:/paletteDark" state=<<qualify "$:/state/ShowPaletteEditor">>>
+
+{{$:/snippets/paletteswitcher}}
+
+<$reveal type="nomatch" state=<<state>> text="yes">
+
+<$button set=<<state>> setTo="yes"><<lingo ShowEditor/Caption>></$button>
+
+</$reveal>
+
+<$reveal type="match" state=<<state>> text="yes">
+
+<$button set=<<state>> setTo="no"><<lingo HideEditor/Caption>></$button>
+{{$:/PaletteManager}}
+
+</$reveal>
+
+</$vars>
diff --git a/core/ui/ControlPanel/Palette/Light.tid b/core/ui/ControlPanel/Palette/Light.tid
@@ -0,0 +1,23 @@
+title: $:/core/ui/ControlPanel/Palette/Light
+caption: {{$:/language/ControlPanel/Palette/Light/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/Palette/
+
+<$vars currPaletteTiddler="$:/palette" state=<<qualify "$:/state/ShowPaletteEditor">>>
+
+{{$:/snippets/paletteswitcher}}
+
+<$reveal type="nomatch" state=<<state>> text="yes">
+
+<$button set=<<state>> setTo="yes"><<lingo ShowEditor/Caption>></$button>
+
+</$reveal>
+
+<$reveal type="match" state=<<state>> text="yes">
+
+<$button set=<<state>> setTo="no"><<lingo HideEditor/Caption>></$button>
+{{$:/PaletteManager}}
+
+</$reveal>
+
+</$vars>
diff --git a/core/ui/EditTemplate/tags.tid b/core/ui/EditTemplate/tags.tid
@@ -29,7 +29,7 @@ color:$(foregroundColor)$;
 \whitespace trim
 <div class="tc-edit-tags">
 <$list filter="[list[!!$tagField$]sort[title]]" storyview="pop">
-<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}} tagField=<<__tagField__>>/>
+<$macrocall $name="tag-body" colour={{!!color}} palette={{{ [{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]then{$:/paletteDark}] ~[{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]then{$:/paletteDark}] ~[{$:/palette}] }}} icon={{!!icon}} tagField=<<__tagField__>>/>
 </$list>
 <$vars tabIndex={{$:/config/EditTabIndex}} cancelPopups="yes">
 <$macrocall $name="tag-picker" tagField=<<__tagField__>>/>

diff --git a/core/ui/PageControls/light-dark.tid b/core/ui/PageControls/light-dark.tid
@@ -0,0 +1,19 @@
+title: $:/core/ui/Buttons/light-dark
+tags: $:/tags/PageControls
+caption: {{$:/core/images/tip}} {{$:/language/Buttons/LightDark/Caption}}
+description: {{$:/language/Buttons/LightDark/Hint}}
+
+\whitespace trim
+<$button class=<<tv-config-toolbar-class>> tooltip={{$:/language/Buttons/LightDark/Hint}}>
+<$list filter="[{$:/config/AutoDarkMode}!match[yes]]">
+<$action-listops $tiddler="$:/config/DarkMode" $field="text" $subfilter="+[toggle[yes],[no]]"/>
+</$list>
+<$list filter="[<tv-config-toolbar-icons>match[yes]]">
+<$list filter="[{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]] ~[{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]]" emptyMessage="""{{$:/core/images/tip}}""">
+{{$:/core/images/tip}}
+</$list>
+</$list>
+<$list filter="[<tv-config-toolbar-text>match[yes]]">
+<span class="tc-btn-text"><$text text={{$:/language/Buttons/LightDark/Caption}}/></span>
+</$list>
+</$button>
diff --git a/core/ui/PageControls/palette.tid b/core/ui/PageControls/palette.tid
@@ -17,6 +17,8 @@ description: {{$:/language/Buttons/Palette/Hint}}
 </span>
 <$reveal state=<<qualify "$:/state/popup/palette">> type="popup" position="below" animate="yes">
 <div class="tc-drop-down" style="font-size:0.7em;">
+<$set name="currPaletteTiddler" value={{{ [{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]then[$:/paletteDark]] [{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]then[$:/paletteDark]] ~[[$:/palette]] }}}>
 {{$:/snippets/paletteswitcher}}
+</$set>
 </div>
 </$reveal>
diff --git a/core/ui/PaletteManager.tid b/core/ui/PaletteManager.tid
@@ -73,20 +73,20 @@ title: $:/PaletteManager
 </tbody>
 </table>
 \end
-<$set name="currentTiddler" value={{$:/palette}}>
+<$set name="currentTiddler" value={{{ [<currPaletteTiddler>get[text]] }}}>
 
-<<lingo Prompt>> <$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+<<lingo Prompt>> <$link to={{{ [<currPaletteTiddler>get[text]] }}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
 
 <$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
 <<lingo Prompt/Modified>>
-<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
+<$button message="tm-delete-tiddler" param={{{ [<currPaletteTiddler>get[text]] }}}><<lingo Reset/Caption>></$button>
 </$list>
 
 <$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
 <<lingo Clone/Prompt>>
 </$list>
 
-<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
+<$button message="tm-new-tiddler" param={{{ [<currPaletteTiddler>get[text]] }}}><<lingo Clone/Caption>></$button>
 
 <$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
 

diff --git a/core/ui/TagTemplate.tid b/core/ui/TagTemplate.tid
@@ -3,7 +3,7 @@ title: $:/core/ui/TagTemplate
 \whitespace trim
 <span class="tc-tag-list-item">
 <$set name="transclusion" value=<<currentTiddler>>>
-<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{!!icon}} colour={{!!color}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
+<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{!!icon}} colour={{!!color}} palette={{{ [{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]then{$:/paletteDark}] ~[{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]then{$:/paletteDark}] ~[{$:/palette}] }}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
 <$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
 <$set name="tv-show-missing-links" value="yes">
 <$transclude tiddler="$:/core/ui/ListItemTemplate"/>

diff --git a/core/wiki/config/AutoDarkMode.tid b/core/wiki/config/AutoDarkMode.tid
@@ -0,0 +1,2 @@
+title: $:/config/AutoDarkMode
+text: no
diff --git a/core/wiki/config/PageControlButtons.multids b/core/wiki/config/PageControlButtons.multids
@@ -11,6 +11,7 @@ core/ui/Buttons/refresh: hide
 core/ui/Buttons/import: hide
 core/ui/Buttons/language: hide
 core/ui/Buttons/tag-manager: hide
+core/ui/Buttons/light-dark: hide
 core/ui/Buttons/manager: hide
 core/ui/Buttons/more-page-actions: hide
 core/ui/Buttons/new-journal: hide

diff --git a/core/wiki/macros/CSS.tid b/core/wiki/macros/CSS.tid
@@ -2,7 +2,7 @@ title: $:/core/macros/CSS
 tags: $:/tags/Macro
 
 \define colour(name)
-<$transclude tiddler={{$:/palette}} index="$name$"><$transclude tiddler="$:/palettes/Vanilla" index="$name$"><$transclude tiddler="$:/config/DefaultColourMappings/$name$"/></$transclude></$transclude>
+<$transclude tiddler={{{ [{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]then{$:/paletteDark}] ~[{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]then{$:/paletteDark}] ~[{$:/palette}] }}} index="$name$"><$transclude tiddler="$:/palettes/Vanilla" index="$name$"><$transclude tiddler="$:/config/DefaultColourMappings/$name$"/></$transclude></$transclude>
 \end
 
 \define color(name)

diff --git a/core/wiki/macros/tag.tid b/core/wiki/macros/tag.tid
@@ -21,7 +21,7 @@ $actions$<$transclude tiddler="""$icon$"""/><$view tiddler=<<__tag__>> field="ti
 
 \define tag-pill(tag,element-tag:"span",element-attributes:"",actions:"")
 <span class="tc-tag-list-item">
-<$macrocall $name="tag-pill-body" tag=<<__tag__>> icon={{{ [<__tag__>get[icon]] }}} colour={{{ [<__tag__>get[color]] }}} palette={{$:/palette}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
+<$macrocall $name="tag-pill-body" tag=<<__tag__>> icon={{{ [<__tag__>get[icon]] }}} colour={{{ [<__tag__>get[color]] }}} palette={{{ [{$:/config/AutoDarkMode}!match[yes]then{$:/config/DarkModeSetting}match[yes]then{$:/paletteDark}] ~[{$:/config/AutoDarkMode}match[yes]then{$:/info/darkmode}match[yes]then{$:/paletteDark}] ~[{$:/palette}] }}} element-tag="""$element-tag$""" element-attributes="""$element-attributes$""" actions="""$actions$"""/>
 </span>
 \end
 

diff --git a/core/wiki/paletteDark.tid b/core/wiki/paletteDark.tid
@@ -0,0 +1,3 @@
+title: $:/paletteDark
+
+$:/palettes/CupertinoDark
diff --git a/core/wiki/paletteswitcher.tid b/core/wiki/paletteswitcher.tid
@@ -1,8 +1,10 @@
 title: $:/snippets/paletteswitcher
 
-<$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>
+<$linkcatcher to=<<currPaletteTiddler>>>
+<$set name="currPalette" value={{{ [<currPaletteTiddler>get[text]] }}}>
+<div class="tc-chooser"><$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]]"><$set name="cls" filter="[all[current]prefix<currPalette>]" 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>
+</$set>
 </$linkcatcher>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		title: $:/paletteDark

		$:/palettes/CupertinoDark