add drak-light UI elements

core/language/en-GB/ControlPanel.multids

@@ -57,6 +57,9 @@ 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: Default Dark Palette
+Palette/Config/DefaultLight/Caption: Default 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
@@ -65,8 +68,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 automatic mode detection is activated. The following settings will be used to switch between light and dark wiki palettes.<br><ul><li>The defaults can be changed using the palette {{$:/core/images/palette|16px}} button</li><li>For testing the palette-previews can be manually selected. (Will be changed by the browser if needed)</li></ul>
+Palette/Picker/Prompt/Info: If the browser Light/Dark detection is activated TW will switch palettes according to the browser ''appearance'' settings.
+Palette/Picker/Enable: Enable Browser Light/Dark Mode Detection
+Palette/Picker/Heading: Automatic Light/Dark Mode Configuraton
 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

core/ui/ControlPanel/Palette.tid

@@ -3,9 +3,9 @@ tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/Palette/Caption}}
 
 \define lingo-base() $:/language/ControlPanel/Palette/
+\whitespace trim
 
-{{$:/snippets/paletteswitcher}}
-
+\define paletteEditorButton()
 <$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
 
 <$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
@@ -18,4 +18,22 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
 {{$:/PaletteManager}}
 
 </$reveal>
+\end
 
+{{$:/core/ui/ControlPanel/Palette/LightDarkConfig}}
+
+<$list filter="[{$:/config/palette/enable-light-dark-detection}match[yes]]" variable="ignore">
+
+	<<paletteEditorButton>>
+
+</$list>
+
+<$list filter="[{$:/config/palette/enable-light-dark-detection}!match[yes]]" variable="ignore">
+
+!! <<lingo "Switcher/Heading">>
+
+	{{$:/snippets/paletteswitcher}}
+
+	<<paletteEditorButton>>
+
+</$list>

core/ui/ControlPanel/PaletteLightDarkPicker.tid

@@ -0,0 +1,34 @@
+title: $:/core/ui/ControlPanel/Palette/LightDarkConfig
+
+\define lingo-base() $:/language/ControlPanel/Palette/
+
+\define config-dark-light() $:/config/palette/enable-light-dark-detection
+
+\whitespace trim
+
+!! <<lingo "Picker/Heading">>
+
+<<lingo "Picker/Prompt/Info">>
+
+<$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 should be 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" 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]]">> |
+
+</$reveal>

core/wiki/config/palette/default-dark.tid

@@ -0,0 +1,4 @@
+caption: {{$:/language/ControlPanel/Palette/Config/DefaultDark/Caption}}
+title: $:/config/palette/default-dark
+
+$:/palettes/GruvboxDark

core/wiki/config/palette/default-light.tid

@@ -0,0 +1,4 @@
+caption: {{$:/language/ControlPanel/Palette/Config/DefaultLight/Caption}}
+title: $:/config/palette/default-light
+
+$:/palettes/Vanilla

core/wiki/macros/palette-picker.tid

@@ -0,0 +1,43 @@
+tags: $:/tags/Global
+title: $:/core/macros/palette-picker
+
+\whitespace trim
+
+\procedure palette-info(tiddler)
+\define 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

core/wiki/paletteswitcher.tid

@@ -1,19 +1,31 @@
 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"/>''
-&#32;-&#32;
-<$view field="description" format="text"/>
-{{||$:/snippets/currpalettepreview}}
-</$link>
-</div>
-</$set>
-</$list>
-</div>
+
+\define 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"/>''
+							&#32;-&#32;
+							<$view field="description" format="text"/>
+							{{||$:/snippets/currpalettepreview}}
+						</$link>
+					</div>
+				</$set>
+			</$list>
+		</$let>
+	</div>
 </$linkcatcher>