Merge e86eb2889087ca272fd98ad52bd4e81b11e4b13e into 961e74f73d230d0028efb586db07699120eac888

2025-04-06 02:37:14 +00:00 · 2025-03-22 13:53:49 -04:00 · 2025-03-22 13:53:49 -04:00 · 35ce068526
commit 35ce068526
parent 961e74f73d e86eb28890
91 changed files with 9805 additions and 457 deletions
--- a/core/language/en-GB/ControlPanel.multids
+++ b/core/language/en-GB/ControlPanel.multids
@ -57,6 +57,7 @@ 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/CustomSettings/Prompt: Custom settings for current palette: <<palette-link>>
 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
--- a/core/modules/background-actions.js
+++ b/core/modules/background-actions.js
@ -0,0 +1,129 @@
+/*\
+title: $:/core/modules/background-actions.js
+type: application/javascript
+module-type: global
+
+Class to dispatch actions when filters change
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function BackgroundActionDispatcher(filterTracker,wiki) {
+	var self = this;
+	this.filterTracker = filterTracker;
+	this.wiki = wiki;
+	this.nextTrackedFilterId = 1;
+	this.trackedFilters = Object.create(null); // Hashmap by id
+	// Track the filter for the background actions
+	this.filterTracker.track({
+		filterString: "[all[tiddlers+shadows]tag[$:/tags/BackgroundAction]!is[draft]]",
+		fnEnter: function fnEnter(title) {
+			return self.trackFilter(title);
+		},
+		fnLeave: function fnLeave(title,enterValue) {
+			self.untrackFilter(enterValue);
+		},
+		fnChange: function fnChange(title,enterValue) {
+			self.untrackFilter(enterValue);
+			return self.trackFilter(title);
+		},
+		fnProcess: function fnProcess(changes) {
+			self.process(changes);
+		}
+	});
+}
+
+BackgroundActionDispatcher.prototype.trackFilter = function(title) {
+	var tiddler = this.wiki.getTiddler(title),
+		id = this.nextTrackedFilterId++,
+		tracker = new BackgroundActionTracker({
+			wiki: this.wiki,
+			title: title,
+			trackFilter: tiddler.fields["track-filter"],
+			actions: tiddler.fields.text
+		});
+	this.trackedFilters[id] = tracker;
+	return id;
+};
+
+BackgroundActionDispatcher.prototype.untrackFilter = function(enterValue) {
+	var tracker = this.trackedFilters[enterValue];
+	if(tracker) {
+		tracker.destroy();
+	}
+	delete this.trackedFilters[enterValue];
+};
+
+BackgroundActionDispatcher.prototype.process = function(changes) {
+	for(var id in this.trackedFilters) {
+		this.trackedFilters[id].process(changes);
+	}
+};
+
+/*
+Represents an individual tracked filter. Options include:
+wiki: wiki to use
+title: title of the tiddler being tracked
+trackFilter: filter string to track changes
+actions: actions to be executed when the filter changes
+*/
+function BackgroundActionTracker(options) {
+	var self = this;
+	this.wiki = options.wiki;
+	this.title = options.title;
+	this.trackFilter = options.trackFilter;
+	this.actions = options.actions;
+	this.filterTracker = new $tw.FilterTracker(this.wiki);
+	this.hasChanged = false;
+	this.trackerID = this.filterTracker.track({
+		filterString: this.trackFilter,
+		fnEnter: function(title) {
+			self.hasChanged = true;
+		},
+		fnLeave: function(title,enterValue) {
+			self.hasChanged = true;
+		},
+		fnProcess: function(changes) {
+			if(self.hasChanged) {
+				self.hasChanged = false;
+				console.log("Processing background action",self.title);
+				var tiddler = self.wiki.getTiddler(self.title),
+					doActions = true;
+				if(tiddler && tiddler.fields.platforms) {
+					doActions = false;
+					var platforms = $tw.utils.parseStringArray(tiddler.fields.platforms);
+					if(($tw.browser && platforms.indexOf("browser") !== -1) || ($tw.node && platforms.indexOf("node") !== -1)) {
+						doActions = true;
+					}
+				}
+				if(doActions) {
+					self.wiki.invokeActionString(
+						self.actions,
+						null,
+						{
+							currentTiddler: self.title
+						},{
+							parentWidget: $tw.rootWidget
+						}
+					);
+				}
+			}
+		}
+	});
+}
+
+BackgroundActionTracker.prototype.process = function(changes) {
+	this.filterTracker.handleChangeEvent(changes);
+};
+
+BackgroundActionTracker.prototype.destroy = function() {
+	this.filterTracker.untrack(this.trackerID);
+};
+
+exports.BackgroundActionDispatcher = BackgroundActionDispatcher;
+
+})();
--- a/core/modules/editor/engines/framed.js
+++ b/core/modules/editor/engines/framed.js
@ -31,7 +31,7 @@ function FramedEngine(options) {
 	this.parentNode.insertBefore(this.iframeNode,this.nextSibling);
 	this.iframeDoc = this.iframeNode.contentWindow.document;
 	// (Firefox requires us to put some empty content in the iframe)
-	var paletteTitle = this.widget.wiki.getTiddlerText("$:/palette");
+	var paletteTitle = this.widget.wiki.getTiddlerText("$:/palette/palette-colours");
 	var colorScheme = (this.widget.wiki.getTiddler(paletteTitle) || {fields: {}}).fields["color-scheme"] || "light";
 	this.iframeDoc.open();
 	this.iframeDoc.write("<meta name='color-scheme' content='" + colorScheme + "'>");
--- a/core/modules/editor/engines/simple.js
+++ b/core/modules/editor/engines/simple.js
@ -28,7 +28,12 @@ function SimpleEngine(options) {
 	if(this.widget.editTag === "textarea") {
 		this.domNode.appendChild(this.widget.document.createTextNode(this.value));
 	} else {
-		this.domNode.value = this.value;
+		if(this.widget.editType === "color") {
+			// The <input type="color"> element requires a six digit hex value
+			this.domNode.value = $tw.utils.convertCSSColorToRGBString(this.value);
+		} else {
+			this.domNode.value = this.value;
+		}
 	}
 	// Set the attributes
 	if(this.widget.editType && this.widget.editTag !== "textarea") {
@ -83,6 +88,9 @@ Update the DomNode with the new text
 */
 SimpleEngine.prototype.updateDomNodeText = function(text) {
 	try {
+		if(this.widget.editType === "color") {
+			text = $tw.utils.convertCSSColorToRGBString(text);
+		}
 		this.domNode.value = text;
 	} catch(e) {
 		// Ignore
--- a/core/modules/editor/factory.js
+++ b/core/modules/editor/factory.js
@ -217,12 +217,10 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
 			this.refreshSelf();
 			return true;
-		} else if (changedTiddlers[this.editRefreshTitle]) {
-			this.engine.updateDomNodeText(this.getEditInfo().value);
-		} else if(changedTiddlers[this.editTitle]) {
+		} else if (changedAttributes["default"] || changedTiddlers[this.editRefreshTitle] || changedTiddlers[this.editTitle]) {
 			var editInfo = this.getEditInfo();
 			this.updateEditor(editInfo.value,editInfo.type);
 		}
--- a/core/modules/filter-tracker.js
+++ b/core/modules/filter-tracker.js
@ -0,0 +1,108 @@
+/*\
+title: $:/core/modules/filter-tracker.js
+type: application/javascript
+module-type: global
+
+Class to track the results of a filter string
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function FilterTracker(wiki) {
+	this.wiki = wiki;
+	this.trackers = [];
+	this.nextTrackerId = 1;
+}
+
+FilterTracker.prototype.handleChangeEvent = function(changes) {
+	this.processTrackers();
+	this.processChanges(changes);
+};
+
+/*
+Add a tracker to the filter tracker. Returns null if any of the parameters are invalid, or a tracker id if the tracker was added successfully. Options include:
+filterString: the filter string to track
+fnEnter: function to call when a title enters the filter results. Called even if the tiddler does not actually exist. Called as (title), and should return a truthy value that is stored in the tracker as the "enterValue"
+fnLeave: function to call when a title leaves the filter results. Called as (title,enterValue)
+fnChange: function to call when a tiddler changes in the filter results. Only called for filter results that identify a tiddler or shadow tiddler. Called as (title,enterValue), and may optionally return a replacement enterValue
+fnProcess: function to call each time the tracker is processed, after any enter, leave or change functions are called. Called as (changes)
+*/
+FilterTracker.prototype.track = function(options) {
+	// Add the tracker details
+	var tracker = {
+		id: this.nextTrackerId++,
+		filterString: options.filterString,
+		fnEnter: options.fnEnter,
+		fnLeave: options.fnLeave,
+		fnChange: options.fnChange,
+		fnProcess: options.fnProcess,
+		previousResults: [], // Results from the previous time the tracker was processed
+		resultValues: {} // Map by title to the value returned by fnEnter
+	};
+	this.trackers.push(tracker);
+	// Process the tracker
+	this.processTracker(this.trackers.length - 1);
+	return tracker.id;
+};
+
+FilterTracker.prototype.untrack = function(id) {
+	for(var t=0; t<this.trackers.length; t++) {
+		if(this.trackers[t].id === id) {
+			this.trackers.splice(t,1);
+			break;
+		}
+	}
+};
+
+FilterTracker.prototype.processTrackers = function() {
+	for(var t=0; t<this.trackers.length; t++) {
+		this.processTracker(t);
+	}
+};
+
+FilterTracker.prototype.processTracker = function(index) {
+	var tracker = this.trackers[index];
+	var results = [];
+	// Evaluate the filter and remove duplicate results
+	$tw.utils.each(this.wiki.filterTiddlers(tracker.filterString),function(title) {
+		$tw.utils.pushTop(results,title);
+	});
+	// Process the newly entered results
+	$tw.utils.each(results,function(title) {
+		if(tracker.previousResults.indexOf(title) === -1 && !tracker.resultValues[title] && tracker.fnEnter) {
+			tracker.resultValues[title] = tracker.fnEnter(title) || true;
+		}
+	});
+	// Process the results that have just left
+	$tw.utils.each(tracker.previousResults,function(title) {
+		if(results.indexOf(title) === -1 && tracker.resultValues[title] && tracker.fnLeave) {
+			tracker.fnLeave(title,tracker.resultValues[title]);
+			delete tracker.resultValues[title];
+		}
+	});
+	// Update the previous results
+	tracker.previousResults = results;
+};
+
+FilterTracker.prototype.processChanges = function(changes) {
+	for(var t=0; t<this.trackers.length; t++) {
+		var tracker = this.trackers[t];
+		$tw.utils.each(changes,function(change,title) {
+			if(title && tracker.previousResults.indexOf(title) !== -1 && tracker.fnChange) {
+				// Call the change function and if it doesn't return a value then keep the old value
+				tracker.resultValues[title] = tracker.fnChange(title,tracker.resultValues[title]) || tracker.resultValues[title];
+			}
+		});
+		if(tracker.fnProcess) {
+			tracker.fnProcess(changes);
+		}
+	}
+};
+
+exports.FilterTracker = FilterTracker;
+
+})();
--- a/core/modules/filterrunprefixes/apply.js
+++ b/core/modules/filterrunprefixes/apply.js
@ -0,0 +1,29 @@
+/*\
+title: $:/core/modules/filterrunprefixes/apply.js
+type: application/javascript
+module-type: filterrunprefix
+
+Filter run prefix to make input titles available as variables when evaluating the filter run
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.apply = function(operationSubFunction) {
+	return function(results,source,widget) {
+		source = widget.wiki.makeTiddlerIterator([]);
+		var variables = {},
+			counter = 1;
+		results.each(function(title) {
+			variables["$" + counter] = title;
+			counter++;
+		});
+		results.clear();
+		results.pushTop(operationSubFunction(source,widget.makeFakeWidgetWithVariables(variables)));
+	};
+};
+
+})();
--- a/core/modules/filters/changecount.js
+++ b/core/modules/filters/changecount.js
@ -0,0 +1,26 @@
+/*\
+title: $:/core/modules/filters/changecount.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operator for retrieving the changecount for each title in the list.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.changecount = function(source,operator,options) {
+	var results = [];
+	source(function(tiddler,title) {
+		results.push(options.wiki.getChangeCount(title) + "");
+	});
+	return results;
+};
+
+})();
--- a/core/modules/filters/colour-ops.js
+++ b/core/modules/filters/colour-ops.js
@ -0,0 +1,145 @@
+/*\
+title: $:/core/modules/filters/colour-ops.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operators for colour operations
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Color = require("$:/core/modules/utils/dom/color.js").Color,
+	colourSpacesList = Object.keys(Color.spaces),
+	hueAdjustersList = ["raw","increasing","decreasing","longer","shorter"];
+
+exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) {
+	return colour.lighten($tw.utils.parseNumber(operator.operand)).display().toString();
+});
+
+exports["colour-darken"] = makeSerialColourOperator(function (colour, operator, options) {
+	return colour.darken($tw.utils.parseNumber(operator.operand)).display().toString();
+});
+
+exports["colour-get-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
+	var prop = ((operator.suffixes || [])[0] || ["l"])[0];
+	if(["l","c","h"].indexOf(prop) !== -1) {
+		colour = colour.oklch[prop];
+	}
+	return colour.toString();
+});
+
+exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
+	var prop = ((operator.suffixes || [])[0] || ["l"])[0];
+	if(["l","c","h"].indexOf(prop) !== -1) {
+		colour.oklch[prop] = $tw.utils.parseNumber(operator.operand);
+	}
+	return colour.display().toString();
+});
+
+exports["colour-set-alpha"] = makeSerialColourOperator(function (colour, operator, options) {
+	colour.alpha = $tw.utils.parseNumber(operator.operand);
+	return colour.display().toString();
+});
+
+exports["colour-contrast"] = makeParallelColourOperator(function (colours, operator, options) {
+	var colourContrasts = [];
+	$tw.utils.each(colours,function(colour,index) {
+		if(!colour) {
+			colour = $tw.utils.parseCSSColorObject("white");
+			colours[index] = colour;
+		}
+		if(index > 0) {
+			colourContrasts.push(colour.contrast(colours[index - 1],"DeltaPhi").toString());
+		}
+	});
+	return colourContrasts;
+});
+
+exports["colour-best-contrast"] = makeParallelColourOperator(function (colours, operator, options, originalColours) {
+	var bestContrast = 0,
+		bestColour = null;
+	if(colours.length < 2) {
+		return [];
+	}
+	var targetColour = colours[colours.length - 1];
+	for(var t=0; t<colours.length; t++) {
+		var colour = colours[t];
+		if(colour) {
+			var contrast = colour.contrast(targetColour,"DeltaPhi");
+			if(contrast > bestContrast) {
+				bestContrast = contrast;
+				bestColour = originalColours[t];
+			}
+		}
+	}
+	if(bestColour) {
+		return [bestColour];
+	} else {
+		return [];
+	}
+});
+
+exports["colour-interpolate"] = function(source,operator,options) {
+	// Get the colour space suffix
+	var space = (((operator.suffixes || [])[0] || ["srgb"])[0]).toLowerCase();
+	if(colourSpacesList.indexOf(space) === -1) {
+		space = "srgb";
+	}
+	// Get the hue adjuster suffix
+	var hueAdjuster = (((operator.suffixes || [])[1] || ["shorter"])[0]).toLowerCase();
+	if(hueAdjustersList.indexOf(hueAdjuster) === -1) {
+		hueAdjuster = "shorter";
+	}
+	// Get the colours
+	if(operator.operands.length < 2) {
+		return [];
+	}
+	var colourA = $tw.utils.parseCSSColorObject(operator.operands[0]),
+		colourB = $tw.utils.parseCSSColorObject(operator.operands[1]);
+	if(!colourA || !colourB) {
+		return [];
+	}
+	var rangefn = colourA.range(colourB,{space: space, hue: hueAdjuster});
+	// Cycle through the weights
+	var results = [];
+	source(function(tiddler,title) {
+		var index = $tw.utils.parseNumber(title);
+		var colour = rangefn(index);
+		results.push(colour.display().toString());
+	});
+	return results;
+};
+
+function makeSerialColourOperator(fn) {
+	return function (source, operator, options) {
+		var results = [];
+		source(function (tiddler, title) {
+			var c = $tw.utils.parseCSSColorObject(title);
+			if (c) {
+				c = fn(c, operator, options);
+				results.push(c);
+			} else {
+				results.push("");
+			}
+		});
+		return results;
+	};
+}
+
+function makeParallelColourOperator(fn) {
+	return function (source, operator, options) {
+		var originalColours = [],
+			colours = [];
+		source(function (tiddler, title) {
+			originalColours.push(title);
+			colours.push($tw.utils.parseCSSColorObject(title));
+		});
+		return fn(colours, operator, options, originalColours);
+	};
+}
+
+})();
--- a/core/modules/info/mediaquerytracker.js
+++ b/core/modules/info/mediaquerytracker.js
@ -0,0 +1,72 @@
+/*\
+title: $:/core/modules/info/mediaquerytracker.js
+type: application/javascript
+module-type: info
+
+Initialise $:/info/ tiddlers derived from media queries via 
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
+	if($tw.browser) {
+		// Functions to start and stop tracking a particular media query tracker tiddler
+		function track(title) {
+			var result = {},
+				tiddler = $tw.wiki.getTiddler(title);
+			if(tiddler) {
+				var mediaQuery = tiddler.fields["media-query"],
+					infoTiddler = tiddler.fields["info-tiddler"],
+					infoTiddlerAlt = tiddler.fields["info-tiddler-alt"];
+				if(mediaQuery && infoTiddler) {
+					// Evaluate and track the media query
+					result.mqList = window.matchMedia(mediaQuery);
+					function getResultTiddlers() {
+						var value = result.mqList.matches ? "yes" : "no",
+							tiddlers = [];
+						tiddlers.push({title: infoTiddler, text: value});
+						if(infoTiddlerAlt) {
+							tiddlers.push({title: infoTiddlerAlt, text: value})
+						}
+						return tiddlers;
+					};
+					updateInfoTiddlersCallback(getResultTiddlers());
+					result.handler = function(event) {
+						updateInfoTiddlersCallback(getResultTiddlers());
+					};
+					result.mqList.addEventListener("change",result.handler);
+				}
+			}
+			return result;
+		}
+		function untrack(enterValue) {
+			if(enterValue.mqList && enterValue.handler) {
+				enterValue.mqList.removeEventListener("change",enterValue.handler);
+			}
+		}
+		// Track media query tracker tiddlers
+		function fnEnter(title) {
+			return track(title);
+		}
+		function fnLeave(title,enterValue) {
+			untrack(enterValue);
+		}
+		function fnChange(title,enterValue) {
+			untrack(enterValue);
+			return track(title);
+		}
+		$tw.filterTracker.track({
+			filterString: "[all[tiddlers+shadows]tag[$:/tags/MediaQueryTracker]!is[draft]]",
+			fnEnter: fnEnter,
+			fnLeave: fnLeave,
+			fnChange: fnChange
+		});
+	}
+	return [];
+};
+
+})();
--- a/core/modules/info/platform.js
+++ b/core/modules/info/platform.js
@ -33,13 +33,6 @@ exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
 		// 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 || ""});
 	}
--- a/core/modules/macros/contrastcolour.js
+++ b/core/modules/macros/contrastcolour.js
@ -26,25 +26,26 @@ exports.params = [
 Run the macro
 */
 exports.run = function(target,fallbackTarget,colourA,colourB) {
-	var rgbTarget = $tw.utils.parseCSSColor(target) || $tw.utils.parseCSSColor(fallbackTarget);
+	var rgbTarget = $tw.utils.parseCSSColorObject(target) || $tw.utils.parseCSSColorObject(fallbackTarget);
 	if(!rgbTarget) {
 		return colourA;
 	}
-	var rgbColourA = $tw.utils.parseCSSColor(colourA),
-		rgbColourB = $tw.utils.parseCSSColor(colourB);
+	var rgbColourA = $tw.utils.parseCSSColorObject(colourA),
+		rgbColourB = $tw.utils.parseCSSColorObject(colourB);
 	if(rgbColourA && !rgbColourB) {
-		return rgbColourA;
+		return colourA;
 	}
 	if(rgbColourB && !rgbColourA) {
-		return rgbColourB;
+		return colourB;
 	}
 	if(!rgbColourA && !rgbColourB) {
 		// If neither colour is readable, return a crude inverse of the target
-		return [255 - rgbTarget[0],255 - rgbTarget[1],255 - rgbTarget[2],rgbTarget[3]];
+		rgbTarget.srgb.r = 1 - rgbTarget.srgb.r;
+		rgbTarget.srgb.g = 1 - rgbTarget.srgb.g;
+		rgbTarget.srgb.b = 1 - rgbTarget.srgb.b;
+		return rgbTarget.display();
 	}
-	// Colour brightness formula derived from http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
-	var brightnessTarget = rgbTarget[0] * 0.299 + rgbTarget[1] * 0.587 + rgbTarget[2] * 0.114,
-		brightnessA = rgbColourA[0] * 0.299 + rgbColourA[1] * 0.587 + rgbColourA[2] * 0.114,
-		brightnessB = rgbColourB[0] * 0.299 + rgbColourB[1] * 0.587 + rgbColourB[2] * 0.114;
-	return Math.abs(brightnessTarget - brightnessA) > Math.abs(brightnessTarget - brightnessB) ? colourA : colourB;
+	var aContrast = rgbColourA.contrast(rgbTarget,"DeltaPhi"),
+		bContrast = rgbColourB.contrast(rgbTarget,"DeltaPhi");
+	return aContrast > bContrast ? colourA : colourB;
 };
--- a/core/modules/startup/load-modules.js
+++ b/core/modules/startup/load-modules.js
@ -13,6 +13,11 @@ Load core modules
 exports.name = "load-modules";
 exports.synchronous = true;

+// Set to `true` to enable performance instrumentation
+var PERFORMANCE_INSTRUMENTATION_CONFIG_TITLE = "$:/config/Performance/Instrumentation";
+
+var widget = require("$:/core/modules/widgets/widget.js");
+
 exports.startup = function() {
 	// Load modules
 	$tw.modules.applyMethods("utils",$tw.utils);
@ -32,4 +37,25 @@ exports.startup = function() {
 	$tw.macros = $tw.modules.getModulesByTypeAsHashmap("macro");
 	$tw.wiki.initParsers();
 	$tw.Commander.initCommands();
+	// --------------------------
+	// The rest of the startup process here is not strictly to do with loading modules, but are needed before other startup
+	// modules are executed. It is easier to put them here than to introduce a new startup module
+	// --------------------------
+	// Create a root widget for attaching event handlers. By using it as the parentWidget for another widget tree, one can reuse the event handlers
+	$tw.rootWidget = new widget.widget({
+		type: "widget",
+		children: []
+	},{
+		wiki: $tw.wiki,
+		document: $tw.browser ? document : $tw.fakeDocument
+	});
+	// Set up the performance framework
+	$tw.perf = new $tw.Performance($tw.wiki.getTiddlerText(PERFORMANCE_INSTRUMENTATION_CONFIG_TITLE,"no") === "yes");
+	// Kick off the filter tracker
+	$tw.filterTracker = new $tw.FilterTracker($tw.wiki);
+	$tw.wiki.addEventListener("change",function(changes) {
+		$tw.filterTracker.handleChangeEvent(changes);
+	});
+	// Kick off the background action dispatcher
+	$tw.backgroundActionDispatcher = new $tw.BackgroundActionDispatcher($tw.filterTracker,$tw.wiki);
 };
--- a/core/modules/startup/startup.js
+++ b/core/modules/startup/startup.js
@ -14,11 +14,6 @@ exports.name = "startup";
 exports.after = ["load-modules"];
 exports.synchronous = true;

-// Set to `true` to enable performance instrumentation
-var PERFORMANCE_INSTRUMENTATION_CONFIG_TITLE = "$:/config/Performance/Instrumentation";
-
-var widget = require("$:/core/modules/widgets/widget.js");
-
 exports.startup = function() {
 	// Minimal browser detection
 	if($tw.browser) {
@ -54,16 +49,6 @@ exports.startup = function() {
 	}
 	// Initialise version
 	$tw.version = $tw.utils.extractVersionInfo();
-	// Set up the performance framework
-	$tw.perf = new $tw.Performance($tw.wiki.getTiddlerText(PERFORMANCE_INSTRUMENTATION_CONFIG_TITLE,"no") === "yes");
-	// Create a root widget for attaching event handlers. By using it as the parentWidget for another widget tree, one can reuse the event handlers
-	$tw.rootWidget = new widget.widget({
-		type: "widget",
-		children: []
-	},{
-		wiki: $tw.wiki,
-		document: $tw.browser ? document : $tw.fakeDocument
-	});
 	// Kick off the language manager and switcher
 	$tw.language = new $tw.Language();
 	$tw.languageSwitcher = new $tw.PluginSwitcher({
--- a/core/modules/utils/dom/color-utils.js
+++ b/core/modules/utils/dom/color-utils.js
@ -0,0 +1,60 @@
+/*\
+title: $:/core/modules/utils/color-utils.js
+type: application/javascript
+module-type: utils
+
+Color.js related utilities
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Color = require("$:/core/modules/utils/dom/color.js").Color;
+
+/*
+For backwards compatibility
+*/
+exports.parseCSSColor = function(colourString) {
+	var c = exports.parseCSSColorObject(colourString);
+	if(c) {
+		var rgb = c.srgb;
+		return [rgb[0],rgb[1],rgb[2],c.alpha];
+	} else {
+		return null;
+	}
+};
+
+
+/*
+Preferred way to parse a Color.js colour
+*/
+exports.parseCSSColorObject = function(colourString) {
+	var c = null;
+	try {
+		c = new Color(colourString);
+	} catch(e) {
+		// Return null if there is an error
+	}
+	return c;
+};
+
+/*
+Convert a CSS colour to an RGB string suitable for use with the <input type="color"> element
+*/
+exports.convertCSSColorToRGBString = function(colourString) {
+	var c = exports.parseCSSColorObject(colourString);
+	if(c) {
+		var hex = c.toString({format: "hex"});
+		if(hex.length === 4) {
+			hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+		}
+		return hex;
+	} else {
+		return null;
+	}
+};
+
+})();
--- a/core/modules/utils/dom/color.js/LICENSE
+++ b/core/modules/utils/dom/color.js/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Lea Verou, Chris Lilley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/core/modules/utils/dom/color.js/color.global.0.5.2.js
+++ b/core/modules/utils/dom/color.js/color.global.0.5.2.js
--- a/core/modules/utils/dom/color.js/tiddlywiki.files
+++ b/core/modules/utils/dom/color.js/tiddlywiki.files
@ -0,0 +1,21 @@
+{
+	"tiddlers": [
+		{
+			"file": "color.global.0.5.2.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/core/modules/utils/dom/color.js",
+				"module-type": "library"
+			},
+			"prefix": "",
+			"suffix": ";\nexports.Color = Color;"
+		},
+		{
+			"file": "LICENSE",
+			"fields": {
+				"type": "text/plain",
+				"title": "$:/core/modules/utils/dom/color.js/license"
+			}
+		}
+	]
+}
--- a/core/modules/utils/dom/csscolorparser.js
+++ b/core/modules/utils/dom/csscolorparser.js
@ -1,200 +0,0 @@
-// (c) Dean McNamee <dean@gmail.com>, 2012.
-//
-// https://github.com/deanm/css-color-parser-js
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to
-// deal in the Software without restriction, including without limitation the
-// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-// sell copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
-// IN THE SOFTWARE.
-
-// http://www.w3.org/TR/css3-color/
-var kCSSColorTable = {
-  "transparent": [0,0,0,0], "aliceblue": [240,248,255,1],
-  "antiquewhite": [250,235,215,1], "aqua": [0,255,255,1],
-  "aquamarine": [127,255,212,1], "azure": [240,255,255,1],
-  "beige": [245,245,220,1], "bisque": [255,228,196,1],
-  "black": [0,0,0,1], "blanchedalmond": [255,235,205,1],
-  "blue": [0,0,255,1], "blueviolet": [138,43,226,1],
-  "brown": [165,42,42,1], "burlywood": [222,184,135,1],
-  "cadetblue": [95,158,160,1], "chartreuse": [127,255,0,1],
-  "chocolate": [210,105,30,1], "coral": [255,127,80,1],
-  "cornflowerblue": [100,149,237,1], "cornsilk": [255,248,220,1],
-  "crimson": [220,20,60,1], "cyan": [0,255,255,1],
-  "darkblue": [0,0,139,1], "darkcyan": [0,139,139,1],
-  "darkgoldenrod": [184,134,11,1], "darkgray": [169,169,169,1],
-  "darkgreen": [0,100,0,1], "darkgrey": [169,169,169,1],
-  "darkkhaki": [189,183,107,1], "darkmagenta": [139,0,139,1],
-  "darkolivegreen": [85,107,47,1], "darkorange": [255,140,0,1],
-  "darkorchid": [153,50,204,1], "darkred": [139,0,0,1],
-  "darksalmon": [233,150,122,1], "darkseagreen": [143,188,143,1],
-  "darkslateblue": [72,61,139,1], "darkslategray": [47,79,79,1],
-  "darkslategrey": [47,79,79,1], "darkturquoise": [0,206,209,1],
-  "darkviolet": [148,0,211,1], "deeppink": [255,20,147,1],
-  "deepskyblue": [0,191,255,1], "dimgray": [105,105,105,1],
-  "dimgrey": [105,105,105,1], "dodgerblue": [30,144,255,1],
-  "firebrick": [178,34,34,1], "floralwhite": [255,250,240,1],
-  "forestgreen": [34,139,34,1], "fuchsia": [255,0,255,1],
-  "gainsboro": [220,220,220,1], "ghostwhite": [248,248,255,1],
-  "gold": [255,215,0,1], "goldenrod": [218,165,32,1],
-  "gray": [128,128,128,1], "green": [0,128,0,1],
-  "greenyellow": [173,255,47,1], "grey": [128,128,128,1],
-  "honeydew": [240,255,240,1], "hotpink": [255,105,180,1],
-  "indianred": [205,92,92,1], "indigo": [75,0,130,1],
-  "ivory": [255,255,240,1], "khaki": [240,230,140,1],
-  "lavender": [230,230,250,1], "lavenderblush": [255,240,245,1],
-  "lawngreen": [124,252,0,1], "lemonchiffon": [255,250,205,1],
-  "lightblue": [173,216,230,1], "lightcoral": [240,128,128,1],
-  "lightcyan": [224,255,255,1], "lightgoldenrodyellow": [250,250,210,1],
-  "lightgray": [211,211,211,1], "lightgreen": [144,238,144,1],
-  "lightgrey": [211,211,211,1], "lightpink": [255,182,193,1],
-  "lightsalmon": [255,160,122,1], "lightseagreen": [32,178,170,1],
-  "lightskyblue": [135,206,250,1], "lightslategray": [119,136,153,1],
-  "lightslategrey": [119,136,153,1], "lightsteelblue": [176,196,222,1],
-  "lightyellow": [255,255,224,1], "lime": [0,255,0,1],
-  "limegreen": [50,205,50,1], "linen": [250,240,230,1],
-  "magenta": [255,0,255,1], "maroon": [128,0,0,1],
-  "mediumaquamarine": [102,205,170,1], "mediumblue": [0,0,205,1],
-  "mediumorchid": [186,85,211,1], "mediumpurple": [147,112,219,1],
-  "mediumseagreen": [60,179,113,1], "mediumslateblue": [123,104,238,1],
-  "mediumspringgreen": [0,250,154,1], "mediumturquoise": [72,209,204,1],
-  "mediumvioletred": [199,21,133,1], "midnightblue": [25,25,112,1],
-  "mintcream": [245,255,250,1], "mistyrose": [255,228,225,1],
-  "moccasin": [255,228,181,1], "navajowhite": [255,222,173,1],
-  "navy": [0,0,128,1], "oldlace": [253,245,230,1],
-  "olive": [128,128,0,1], "olivedrab": [107,142,35,1],
-  "orange": [255,165,0,1], "orangered": [255,69,0,1],
-  "orchid": [218,112,214,1], "palegoldenrod": [238,232,170,1],
-  "palegreen": [152,251,152,1], "paleturquoise": [175,238,238,1],
-  "palevioletred": [219,112,147,1], "papayawhip": [255,239,213,1],
-  "peachpuff": [255,218,185,1], "peru": [205,133,63,1],
-  "pink": [255,192,203,1], "plum": [221,160,221,1],
-  "powderblue": [176,224,230,1], "purple": [128,0,128,1],
-  "red": [255,0,0,1], "rosybrown": [188,143,143,1],
-  "royalblue": [65,105,225,1], "saddlebrown": [139,69,19,1],
-  "salmon": [250,128,114,1], "sandybrown": [244,164,96,1],
-  "seagreen": [46,139,87,1], "seashell": [255,245,238,1],
-  "sienna": [160,82,45,1], "silver": [192,192,192,1],
-  "skyblue": [135,206,235,1], "slateblue": [106,90,205,1],
-  "slategray": [112,128,144,1], "slategrey": [112,128,144,1],
-  "snow": [255,250,250,1], "springgreen": [0,255,127,1],
-  "steelblue": [70,130,180,1], "tan": [210,180,140,1],
-  "teal": [0,128,128,1], "thistle": [216,191,216,1],
-  "tomato": [255,99,71,1], "turquoise": [64,224,208,1],
-  "violet": [238,130,238,1], "wheat": [245,222,179,1],
-  "white": [255,255,255,1], "whitesmoke": [245,245,245,1],
-  "yellow": [255,255,0,1], "yellowgreen": [154,205,50,1]}
-
-function clamp_css_byte(i) {  // Clamp to integer 0 .. 255.
-  i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
-  return i < 0 ? 0 : i > 255 ? 255 : i;
-}
-
-function clamp_css_float(f) {  // Clamp to float 0.0 .. 1.0.
-  return f < 0 ? 0 : f > 1 ? 1 : f;
-}
-
-function parse_css_int(str) {  // int or percentage.
-  if (str[str.length - 1] === '%')
-    return clamp_css_byte(parseFloat(str) / 100 * 255);
-  return clamp_css_byte(parseInt(str));
-}
-
-function parse_css_float(str) {  // float or percentage.
-  if (str[str.length - 1] === '%')
-    return clamp_css_float(parseFloat(str) / 100);
-  return clamp_css_float(parseFloat(str));
-}
-
-function css_hue_to_rgb(m1, m2, h) {
-  if (h < 0) h += 1;
-  else if (h > 1) h -= 1;
-
-  if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
-  if (h * 2 < 1) return m2;
-  if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
-  return m1;
-}
-
-function parseCSSColor(css_str) {
-  // Remove all whitespace, not compliant, but should just be more accepting.
-  var str = css_str.replace(/ /g, '').toLowerCase();
-
-  // Color keywords (and transparent) lookup.
-  if (str in kCSSColorTable) return kCSSColorTable[str].slice();  // dup.
-
-  // #abc and #abc123 syntax.
-  if (str[0] === '#') {
-    if (str.length === 4) {
-      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
-      if (!(iv >= 0 && iv <= 0xfff)) return null;  // Covers NaN.
-      return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
-              (iv & 0xf0) | ((iv & 0xf0) >> 4),
-              (iv & 0xf) | ((iv & 0xf) << 4),
-              1];
-    } else if (str.length === 7) {
-      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
-      if (!(iv >= 0 && iv <= 0xffffff)) return null;  // Covers NaN.
-      return [(iv & 0xff0000) >> 16,
-              (iv & 0xff00) >> 8,
-              iv & 0xff,
-              1];
-    }
-
-    return null;
-  }
-
-  var op = str.indexOf('('), ep = str.indexOf(')');
-  if (op !== -1 && ep + 1 === str.length) {
-    var fname = str.substr(0, op);
-    var params = str.substr(op+1, ep-(op+1)).split(',');
-    var alpha = 1;  // To allow case fallthrough.
-    switch (fname) {
-      case 'rgba':
-        if (params.length !== 4) return null;
-        alpha = parse_css_float(params.pop());
-        // Fall through.
-      case 'rgb':
-        if (params.length !== 3) return null;
-        return [parse_css_int(params[0]),
-                parse_css_int(params[1]),
-                parse_css_int(params[2]),
-                alpha];
-      case 'hsla':
-        if (params.length !== 4) return null;
-        alpha = parse_css_float(params.pop());
-        // Fall through.
-      case 'hsl':
-        if (params.length !== 3) return null;
-        var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360;  // 0 .. 1
-        // NOTE(deanm): According to the CSS spec s/l should only be
-        // percentages, but we don't bother and let float or percentage.
-        var s = parse_css_float(params[1]);
-        var l = parse_css_float(params[2]);
-        var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
-        var m1 = l * 2 - m2;
-        return [clamp_css_byte(css_hue_to_rgb(m1, m2, h+1/3) * 255),
-                clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
-                clamp_css_byte(css_hue_to_rgb(m1, m2, h-1/3) * 255),
-                alpha];
-      default:
-        return null;
-    }
-  }
-
-  return null;
-}
-
-try { exports.parseCSSColor = parseCSSColor } catch(e) { }
--- a/core/modules/utils/dom/csscolorparser.js.meta
+++ b/core/modules/utils/dom/csscolorparser.js.meta
@ -1,3 +0,0 @@
-title: $:/core/modules/utils/dom/csscolorparser.js
-type: application/javascript
-module-type: utils
--- a/core/palettes/AutoToggle.tid
+++ b/core/palettes/AutoToggle.tid
@ -0,0 +1,9 @@
+title: $:/palettes/AutoToggle
+name: AutoToggle
+description: Automatically switch between dark and light modes
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: [{$:/info/browser/darkmode}!match[yes]then[light]else[dark]]
+settings: $:/palettes/AutoToggle/Settings
+palette-import@light: $:/palettes/FlexokiLight
+palette-import@dark: $:/palettes/FlexokiDark
--- a/core/palettes/AutoToggleSettings.tid
+++ b/core/palettes/AutoToggleSettings.tid
@ -0,0 +1,19 @@
+title: $:/palettes/AutoToggle/Settings
+
+\procedure set-imported-palette(field)
+<$select field=<<field>>>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]] -[<currentTiddler>]">
+		<option value=<<currentTiddler>>><$view field="name"><$view field="title"/></$view></option>
+	</$list>
+</$select>
+\end set-imported-palette
+
+This palette can be used to automatically switch between two palettes based on the browser's dark mode setting.
+
+<$tiddler tiddler={{$:/palette}}>
+
+Light palette: <<set-imported-palette field:"palette-import@light">>
+
+Dark palette: <<set-imported-palette field:"palette-import@dark">>
+
+</$tiddler>
--- a/core/palettes/TwentyTwenties.tid
+++ b/core/palettes/TwentyTwenties.tid
@ -0,0 +1,225 @@
+title: $:/palettes/TwentyTwenties
+name: TwentyTwenties
+description: Modern and flexible
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+settings: $:/palettes/TwentyTwenties/Settings
+palette-import: $:/palettes/Vanilla
+
+# Background and foreground colours, which are interpolated as required
+base-paper: #FFFCF0
+base-background: #edcec1
+base-ink: #333344
+?base-paper-ink: [tf.check-colour-contrast[base-paper],[base-ink],[45]]
+?base-background-ink: [tf.check-colour-contrast[base-background],[base-ink],[45]]
+
+# Primary colour, used for links and other accented elements
+base-primary: #5778d8
+?base-paper-primary: [tf.check-colour-contrast[base-paper],[base-primary],[45]]
+?base-background-primary: [tf.check-colour-contrast[base-background],[base-primary],[45]]
+
+# Secondary colour, used for alerts and other secondary elements
+base-secondary: #f0e48a
+?base-ink-secondary: [tf.check-colour-contrast[base-ink],[base-secondary],[45]]
+
+# Tertiary base colour, used for monospaced text and other tertiary elements
+base-tertiary: rgb(183, 95, 95)
+?base-paper-tertiary: [tf.check-colour-contrast[base-paper],[base-tertiary],[45]]
+
+# Basic spectrum colours
+base-black: #100F0F
+base-red: #D14D41
+base-orange: #DA702C
+base-yellow: #D0A215
+base-green: #879A39
+base-cyan: #3AA99F
+base-blue: #4385BE
+base-purple: #8B7EC8
+base-magenta: #CE5D97
+base-white: #FFFCF0
+# Darker variants
+# base-red: #AF3029
+# base-orange: #BC5215
+# base-yellow: #AD8301
+# base-green: #66800B
+# base-cyan: #24837B
+# base-blue: #205EA6
+# base-purple: #5E409D
+# base-magenta: #A02F6F
+
+# Palette definitions
+alert-background: [tf.colour[base-secondary]]
+alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]]
+alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]]
+alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]]
+background: [tf.colour[base-paper]]
+blockquote-bar: [tf.colour[muted-foreground]]
+button-background: 
+button-border: 
+button-foreground: 
+code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
+code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
+code-foreground: [tf.colour[base-tertiary]]
+diff-delete-background: [tf.colour[base-red]]
+diff-delete-foreground: [tf.colour[foreground]]
+diff-equal-background: 
+diff-equal-foreground: [tf.colour[foreground]]
+diff-insert-background: [tf.colour[base-green]]
+diff-insert-foreground: [tf.colour[foreground]]
+diff-invisible-background: 
+diff-invisible-foreground: [tf.colour[muted-foreground]]
+dirty-indicator: [tf.colour[base-tertiary]]
+download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]]
+download-foreground: [tf.interpolate-colours[base-ink],[base-green],[0.1]]
+dragger-background: [tf.colour[foreground]]
+dragger-foreground: [tf.colour[background]]
+dropdown-background: [tf.colour[background]]
+dropdown-border: [tf.colour[muted-foreground]]
+dropdown-tab-background-selected: [tf.colour[background]]
+dropdown-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.9]]
+dropzone-background: [tf.colour[base-secondary]colour-set-alpha[0.7]]
+external-link-background-hover: inherit
+external-link-background-visited: inherit
+external-link-background: inherit
+external-link-foreground-hover: inherit
+external-link-foreground-visited: [tf.colour[primary]]
+external-link-foreground: [tf.colour[primary]]
+footnote-target-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
+foreground: [tf.colour[base-ink]]
+highlight-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.5]]
+highlight-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
+menubar-background: #5778d8
+menubar-foreground: #fff
+message-background: [tf.interpolate-colours[base-paper],[base-blue],[0.2]]
+message-border: [tf.interpolate-colours[base-blue],[base-ink],[0.5]]
+message-foreground: [tf.interpolate-colours[base-blue],[base-ink],[0.8]]
+modal-backdrop: [tf.colour[foreground]]
+modal-background: [tf.colour[background]]
+modal-border: #999999
+modal-footer-background: #f5f5f5
+modal-footer-border: #dddddd
+modal-header-border: #eeeeee
+muted-foreground: [tf.interpolate-colours[base-paper],[base-ink],[0.3]]
+network-activity-foreground: #448844
+notification-background: [tf.colour[base-tertiary]colour-set-oklch:l[0.9]]
+notification-border: [tf.colour[base-tertiary]colour-set-oklch:l[0.2]]
+page-background: [tf.colour[base-background]] /* mopthing */
+pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
+pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
+primary: [tf.colour[base-primary]]
+select-tag-background: 
+select-tag-foreground: 
+selection-background: 
+selection-foreground: 
+sidebar-button-foreground: [tf.colour[sidebar-controls-foreground]]
+sidebar-controls-foreground-hover: [tf.interpolate-colours[base-ink],[base-background],[0.2]]
+sidebar-controls-foreground: [tf.interpolate-colours[base-ink],[base-background],[0.8]]
+sidebar-foreground-shadow: inherit
+sidebar-foreground: =[tf.colour[base-ink]] =[tf.colour[base-paper]] =[tf.colour[base-background]] +[colour-best-contrast:DeltaPhi[]]
+sidebar-muted-foreground-hover: [tf.colour[sidebar-muted-foreground]colour-set-oklch:l[0.3]]
+sidebar-muted-foreground: [tf.interpolate-colours[foreground],[page-background],[0.6]]
+sidebar-tab-background-selected: [tf.colour[tab-background-selected]]
+sidebar-tab-background: [tf.colour[tab-background]]
+sidebar-tab-border-selected: [tf.colour[tab-border-selected]]
+sidebar-tab-border: [tf.colour[tab-border]]
+sidebar-tab-divider: [tf.colour[tab-divider]]
+sidebar-tab-foreground-selected: [tf.colour[tab-foreground-selected]]
+sidebar-tab-foreground: [tf.colour[tab-foreground]]
+sidebar-tiddler-link-foreground-hover: [tf.colour[sidebar-tiddler-link-foreground]colour-set-oklch:l[0.5]]
+sidebar-tiddler-link-foreground: =[tf.colour[base-primary]] =[tf.colour[base-secondary]] =[tf.colour[base-tertiary]] =[tf.colour[base-background]] +[colour-best-contrast:DeltaPhi[]]
+site-title-foreground: [tf.colour[tiddler-title-foreground]]
+stability-deprecated: #ff0000
+stability-experimental: #c07c00
+stability-legacy: #0000ff
+stability-stable: #008000
+static-alert-foreground: #aaaaaa
+tab-background-selected: [tf.colour[background]]
+tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
+tab-border-selected: [tf.colour[muted-foreground]]
+tab-border: [tf.colour[muted-foreground]]
+tab-divider: [tf.colour[muted-foreground]]
+tab-foreground-selected: [tf.colour[tab-foreground]]
+tab-foreground: [tf.colour[foreground]]
+table-border: [tf.colour[foreground]]
+table-footer-background: [tf.interpolate-colours[background],[foreground],[0.2]]
+table-header-background: [tf.interpolate-colours[background],[foreground],[0.1]]
+tag-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.9]]
+tag-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
+testcase-accent-level-1: #c1eaff
+testcase-accent-level-2: #E3B740
+testcase-accent-level-3: #5FD564
+tiddler-background: [tf.colour[background]]
+tiddler-border: [tf.interpolate-colours[base-paper],[base-background],[0.5]]
+tiddler-controls-foreground-hover: [tf.interpolate-colours[background],[foreground],[0.7]]
+tiddler-controls-foreground-selected: [tf.interpolate-colours[background],[foreground],[0.9]]
+tiddler-controls-foreground: [tf.interpolate-colours[background],[foreground],[0.5]]
+tiddler-editor-background: #f8f8f8
+tiddler-editor-border-image: #ffffff
+tiddler-editor-border: #cccccc
+tiddler-editor-fields-even: #e0e8e0
+tiddler-editor-fields-odd: #f0f4f0
+tiddler-info-background: #f8f8f8
+tiddler-info-border: #dddddd
+tiddler-info-tab-background: #f8f8f8
+tiddler-link-background: [tf.colour[background]]
+tiddler-link-foreground: [tf.colour[primary]]
+tiddler-subtitle-foreground: [tf.interpolate-colours[background],[foreground],[0.6]]
+tiddler-title-foreground: [tf.interpolate-colours[background],[foreground],[0.9]]
+toolbar-cancel-button: 
+toolbar-close-button: 
+toolbar-delete-button: 
+toolbar-done-button: 
+toolbar-edit-button: 
+toolbar-info-button: 
+toolbar-new-button: 
+toolbar-options-button: 
+toolbar-save-button: 
+tour-chooser-button-foreground: <<colour very-muted-foreground>>
+tour-chooser-button-hover-background: <<colour muted-foreground>>
+tour-chooser-button-hover-foreground: : <<colour background>>
+tour-chooser-button-selected-background: <<colour primary>>
+tour-chooser-button-selected-foreground: <<colour background>>
+tour-chooser-dropdown-foreground: <<colour very-muted-foreground>>
+tour-chooser-item-background: <<colour background>>
+tour-chooser-item-border: <<colour muted-foreground>>
+tour-chooser-item-foreground: <<colour foreground>>
+tour-chooser-item-shadow: <<colour muted-foreground>>
+tour-chooser-item-start-background: <<colour download-background>>
+tour-chooser-item-start-foreground: <<colour background>>
+tour-chooser-item-start-hover-background: <<colour primary>>
+tour-chooser-item-start-hover-foreground: <<colour background>>
+tour-fullscreen-background: <<colour page-background>>
+tour-fullscreen-controls-foreground: <<colour muted-foreground>>
+tour-navigation-buttons-back-background: red
+tour-navigation-buttons-back-foreground: white
+tour-navigation-buttons-hint-background: purple
+tour-navigation-buttons-hint-foreground: white
+tour-navigation-buttons-hover-background: <<colour foreground>>
+tour-navigation-buttons-hover-foreground: <<colour background>>
+tour-navigation-buttons-next-background: purple
+tour-navigation-buttons-next-foreground: white
+tour-overlay-background: #cbfff8
+tour-overlay-border: #228877
+tour-step-heading-background: none
+tour-step-task-background: <<colour download-background>>
+tour-step-task-foreground: <<colour download-foreground>>
+untagged-background: #999999
+very-muted-foreground: #888888
+wikilist-background: #e5e5e5
+wikilist-button-background: #acacac
+wikilist-button-foreground: #000000
+wikilist-button-open-hover: green
+wikilist-button-open: #4fb82b
+wikilist-button-remove-hover: red
+wikilist-button-remove: #d85778
+wikilist-button-reveal-hover: blue
+wikilist-button-reveal: #5778d8
+wikilist-droplink-dragover: [tf.colour[base-secondary]colour-set-alpha[0.7]]
+wikilist-info: #000000
+wikilist-item: #ffffff
+wikilist-title-svg: [tf.colour[wikilist-title]]
+wikilist-title: #666666
+wikilist-toolbar-background: #d3d3d3
+wikilist-toolbar-foreground: #888888
+wikilist-url: #aaaaaa
--- a/core/palettes/TwentyTwentiesDark.tid
+++ b/core/palettes/TwentyTwentiesDark.tid
@ -0,0 +1,11 @@
+title: $:/palettes/TwentyTwenties/Dark
+name: TwentyTwenties Dark
+description: Modern and flexible, Darkish
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: dark
+palette-import: $:/palettes/TwentyTwenties
+
+base-paper: #111122
+base-background: #f5f0f9
+base-ink: #8C8F80
--- a/core/palettes/TwentyTwentiesGreen.tid
+++ b/core/palettes/TwentyTwentiesGreen.tid
@ -0,0 +1,11 @@
+title: $:/palettes/TwentyTwenties/Green
+name: TwentyTwenties (Green)
+description: Modern and flexible, Greenish
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+palette-import: $:/palettes/TwentyTwenties
+
+base-paper: rgb(188, 255, 161)
+base-background: rgb(94, 192, 145)
+base-primary: #6e803c
--- a/core/palettes/TwentyTwentiesSettings.tid
+++ b/core/palettes/TwentyTwentiesSettings.tid
@ -0,0 +1,17 @@
+title: $:/palettes/TwentyTwenties/Settings
+
+\procedure entry(name,description)
+<$text text=<<description>>/>: <$edit-text tiddler={{$:/palette}} index=<<name>> type="color" tag="input" default={{{ [function[colour],<name>] }}}/>
+\end entry
+
+<<entry name:"base-paper" description:"Paper">>
+
+<<entry name:"base-background" description:"Page background">>
+
+<<entry name:"base-ink" description:"Ink">>
+
+<<entry name:"base-primary" description:"Primary">>
+
+<<entry name:"base-secondary" description:"Secondary">>
+
+<<entry name:"base-tertiary" description:"Tertiary">>
--- a/core/palettes/VanillaCherry.tid
+++ b/core/palettes/VanillaCherry.tid
@ -0,0 +1,11 @@
+title: $:/palettes/VanillaCherry
+name: Vanilla Cherry
+description: Pale and unobtrusive with a cherry on top
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+palette-import: $:/palettes/Vanilla
+
+primary:rgb(224, 32, 86);
+menubar-foreground: #fff
+menubar-background: <<colour primary>>
--- a/core/palettes/background/contrast-tests.tid
+++ b/core/palettes/background/contrast-tests.tid
@ -0,0 +1,7 @@
+title: $:/palettes/background/contrast-tests
+type: application/x-tiddler-dictionary
+tags: $:/tags/BackgroundPalette
+
+?background-foreground-contrast: [tf.check-colour-contrast[background],[foreground],[45]]
+?alert-contrast: [tf.check-colour-contrast[alert-background],[foreground],[45]]
+?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[45]]
--- a/core/ui/ControlPanel/Palette.tid
+++ b/core/ui/ControlPanel/Palette.tid
@ -2,20 +2,4 @@ title: $:/core/ui/ControlPanel/Palette
 tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/Palette/Caption}}

-\define lingo-base() $:/language/ControlPanel/Palette/
-
-{{$:/snippets/paletteswitcher}}
-
-<$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>
-
+{{$:/PaletteManager}}
--- a/core/ui/EditTemplate/tags.tid
+++ b/core/ui/EditTemplate/tags.tid
@ -50,7 +50,6 @@ tags: $:/tags/EditTemplate
 	<$list filter="[<currentTiddler>get<tagField>enlist-input[]sort[title]]" storyview="pop">
 		<$macrocall $name="tag-body"
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-			palette={{$:/palette}}
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			tagField=<<tagField>>
 		/>
--- a/core/ui/PaletteEditor.tid
+++ b/core/ui/PaletteEditor.tid
@ -0,0 +1,94 @@
+title: $:/PaletteEditor
+
+\define lingo-base() $:/language/ControlPanel/Palette/Editor/
+\define describePaletteColour(colour)
+<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
+\end
+\define edit-colour-placeholder()
+ edit $(colourName)$
+\end
+\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
+
+\define resolve-colour(macrocall)
+\import $:/core/macros/utils
+\whitespace trim
+<$wikify name="name" text="""$macrocall$""">
+<<name>>
+</$wikify>
+\end
+
+\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
+\define palette-manager-colour-row-segment()
+\whitespace trim
+<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
+<br>
+<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
+<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
+<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
+<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
+<$reveal state=<<state>> type="nomatch" text="show">
+<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$set name="colourName" value=<<newColourName>>>
+<br>
+<<palette-manager-colour-row-segment>>
+<br><br>
+</$set>
+</$reveal>
+</$wikify>
+</$set>
+</$list>
+\end
+
+\define palette-manager-colour-row()
+\whitespace trim
+<tr>
+<td>
+<span style="float:right;">
+<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
+{{$:/core/images/delete-button}}</$button>
+</span>
+''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
+<$macrocall $name="colourName" $output="text/plain"/>
+</td>
+<td>
+<<palette-manager-colour-row-segment>>
+</td>
+</tr>
+\end
+
+\define palette-manager-table()
+\whitespace trim
+<table>
+<tbody>
+<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
+   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
+<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
+</$set>
+</tbody>
+</table>
+\end
+\whitespace trim
+<$set name="currentTiddler" value={{$:/palette}}>
+
+<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+
+<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
+<<lingo Prompt/Modified>>
+&#32;
+<$button message="tm-delete-tiddler" param={{$:/palette}}><<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>
+
+<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
+
+<<palette-manager-table>>
--- a/core/ui/PaletteManager.tid
+++ b/core/ui/PaletteManager.tid
@ -1,94 +1,43 @@
 title: $:/PaletteManager

-\define lingo-base() $:/language/ControlPanel/Palette/Editor/
-\define describePaletteColour(colour)
-<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
-\end
-\define edit-colour-placeholder()
- edit $(colourName)$
-\end
-\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
+\define lingo-base() $:/language/ControlPanel/Palette/

-\define resolve-colour(macrocall)
-\import $:/core/macros/utils
-\whitespace trim
-<$wikify name="name" text="""$macrocall$""">
-<<name>>
-</$wikify>
-\end
+<!-- Used by the language string CustomSettings/Prompt -->
+\procedure palette-link()
+<$tiddler tiddler={{$:/palette}}>
+	<$link to={{!!title}}>
+		<$view field="name" format="text">
+			<$view field="title" format="text"/>
+		</$view>
+	</$link>
+</$tiddler>
+\end palette-link
+
+<$transclude $tiddler="$:/snippets/paletteswitcher" thumbnails="yes"/>
+
+{{$:/snippets/palettetests}}
+
+<$let
+	paletteSettings={{{ [[$:/temp/palette-consolidated]get[settings]] }}}
+>
+	<%if [<paletteSettings>!match[]] %>
+		<div>
+			<<lingo CustomSettings/Prompt>>
+			<$transclude $tiddler=<<paletteSettings>> $mode="block"/>
+		</div>
+	<%endif%>
+</$let>
+
+<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>

-\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
-\define palette-manager-colour-row-segment()
-\whitespace trim
-<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
-<br>
-<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
-<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
-<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
-<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
-<$reveal state=<<state>> type="nomatch" text="show">
-<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
 </$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+
+<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
+{{$:/PaletteEditor}}
+
 </$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$set name="colourName" value=<<newColourName>>>
-<br>
-<<palette-manager-colour-row-segment>>
-<br><br>
-</$set>
-</$reveal>
-</$wikify>
-</$set>
-</$list>
-\end

-\define palette-manager-colour-row()
-\whitespace trim
-<tr>
-<td>
-<span style="float:right;">
-<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
-{{$:/core/images/delete-button}}</$button>
-</span>
-''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
-<$macrocall $name="colourName" $output="text/plain"/>
-</td>
-<td>
-<<palette-manager-colour-row-segment>>
-</td>
-</tr>
-\end
-
-\define palette-manager-table()
-\whitespace trim
-<table>
-<tbody>
-<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
-   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
-<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
-</$set>
-</tbody>
-</table>
-\end
-\whitespace trim
-<$set name="currentTiddler" value={{$:/palette}}>
-
-<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
-
-<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
-<<lingo Prompt/Modified>>
-&#32;
-<$button message="tm-delete-tiddler" param={{$:/palette}}><<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>
-
-<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
-
-<<palette-manager-table>>
--- a/core/ui/Palettes/Preview/Alert.tid
+++ b/core/ui/Palettes/Preview/Alert.tid
@ -0,0 +1,19 @@
+title: $:/core/ui/Palettes/Preview/Alert
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-alert" style.background-color=<<colour alert-background>>>
+	<div class="tc-palette-preview-thumbnail-alert-border" style.border-color=<<colour alert-border>>>
+		<div style.color=<<colour foreground>>>
+			<div class="tc-palette-preview-thumbnail-alert-subtitle" style.color=<<colour alert-muted-foreground>>>
+				Lorem Ipsum
+				<div class="tc-palette-preview-thumbnail-alert-highlight" style.color=<<colour alert-highlight>>>
+					(Count: 1)
+				</div>
+			</div>
+			<div class="tc-palette-preview-thumbnail-alert-body">
+				Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
+			</div>
+		</div>
+	</div>
+</div>
--- a/core/ui/Palettes/Preview/Helpers.tid
+++ b/core/ui/Palettes/Preview/Helpers.tid
@ -0,0 +1,55 @@
+title: $:/core/ui/Palettes/Preview/Helpers
+tags: $:/tags/Preview/Helpers
+
+\whitespace trim
+
+\procedure palette-preview-component-list(tag)
+<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
+	<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
+</$list>
+\end palette-preview-component-list
+
+\procedure tab-set(tabTitles,colourPrefix:"")
+	<div class="tc-palette-preview-thumbnail-tab-set">
+		<div class="tc-palette-preview-thumbnail-tab-buttons">
+			<$list filter="[enlist<tabTitles>]" variable="tabTitle" counter="tabIndex">
+				<%if [<tabIndex>match[1]] %>
+					<span
+						class="tc-palette-preview-thumbnail-tab-button"
+						style.border-color={{{ [<colourPrefix>addsuffix[tab-border-selected]] :map[function[colour],<currentTiddler>] }}}
+						style.color={{{ [<colourPrefix>addsuffix[tab-foreground-selected]] :map[function[colour],<currentTiddler>] }}}
+						style.background-color={{{ [<colourPrefix>addsuffix[tab-background-selected]] :map[function[colour],<currentTiddler>] }}}
+					>
+						<$text text=<<tabTitle>>/>
+					</span>
+				<%else%>
+					<span
+						class="tc-palette-preview-thumbnail-tab-button"
+						style.border-color={{{ [<colourPrefix>addsuffix[tab-border]] :map[function[colour],<currentTiddler>] }}}
+						style.color={{{ [<colourPrefix>addsuffix[tab-foreground]] :map[function[colour],<currentTiddler>] }}}
+						style.background-color={{{ [<colourPrefix>addsuffix[tab-background]] :map[function[colour],<currentTiddler>] }}}
+					>
+						<$text text=<<tabTitle>>/>
+					</span>
+				<%endif%>
+			</$list>
+		</div>
+		<div
+			class="tc-palette-preview-thumbnail-tab-divider"
+			style.border-color={{{ [<colourPrefix>addsuffix[tab-divider]] :map[function[colour],<currentTiddler>] }}}
+		>
+		</div>
+	</div>
+\end tab-set
+
+\procedure link(text)
+<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour primary>>>
+	<$text text=<<text>>/>
+</span>
+\end link
+
+\procedure sidebar-link(text)
+<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour sidebar-tiddler-link-foreground>>>
+	<$text text=<<text>>/>
+</span>
+\end sidebar-link
--- a/core/ui/Palettes/Preview/Notification.tid
+++ b/core/ui/Palettes/Preview/Notification.tid
@ -0,0 +1,11 @@
+title: $:/core/ui/Palettes/Preview/Notification
+tags: $:/tags/Preview/PageOptional
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-notification" style.background-color=<<colour notification-background>>>
+	<div class="tc-palette-preview-thumbnail-notification-border" style.border-color=<<colour notification-border>>>
+		<div class="tc-palette-preview-thumbnail-notification-body" style.color=<<colour foreground>>>
+			Lorem Ipsum Dolor Sit Amet Consectetur
+		</div>
+	</div>
+</div>
--- a/core/ui/Palettes/Preview/SideBar/Search.tid
+++ b/core/ui/Palettes/Preview/SideBar/Search.tid
@ -0,0 +1,8 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Search
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-search" style.background-color=<<colour background>>>
+	<div class="tc-palette-preview-thumbnail-sidebar-search-box">
+	</div>
+</div>
--- a/core/ui/Palettes/Preview/SideBar/Subtitle.tid
+++ b/core/ui/Palettes/Preview/SideBar/Subtitle.tid
@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Subtitle
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-subtitle">
+	a non-linear personal web notebook
+</div>
--- a/core/ui/Palettes/Preview/SideBar/Tabs.tid
+++ b/core/ui/Palettes/Preview/SideBar/Tabs.tid
@ -0,0 +1,18 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Tabs
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+
+\procedure recent-links()
+HelloThere Community Portal GettingStarted Development Download Filters Palettes Plugins Macros Templates Themes Stylesheets SystemTiddlers
+\end recent-links
+
+<<tab-set "Magna Placerat Ligula Imperdiet" "sidebar-">>
+
+<div class="tc-palette-preview-thumbnail-sidebar-list">
+	<$list filter="[enlist<recent-links>]">
+		<div>
+			<$transclude $variable="sidebar-link" text=<<currentTiddler>>/>
+		</div>
+	</$list>
+</div>
--- a/core/ui/Palettes/Preview/SideBar/Title.tid
+++ b/core/ui/Palettes/Preview/SideBar/Title.tid
@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Title
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-title" style.color=<<colour site-title-foreground>>>
+	~TiddlyWiki
+</div>
--- a/core/ui/Palettes/Preview/Sidebar.tid
+++ b/core/ui/Palettes/Preview/Sidebar.tid
@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/SideBar
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
+	<<palette-preview-component-list "$:/tags/Preview/SideBar">>
+</div>
--- a/core/ui/Palettes/Preview/Story.tid
+++ b/core/ui/Palettes/Preview/Story.tid
@ -0,0 +1,9 @@
+title: $:/core/ui/Palettes/Preview/Story
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-story">
+	<$list filter="HelloThere GettingStarted" variable="title">
+		<<palette-preview-component-list "$:/tags/Preview/Story">>
+	</$list>
+</div>
--- a/core/ui/Palettes/Preview/Tiddler.tid
+++ b/core/ui/Palettes/Preview/Tiddler.tid
@ -0,0 +1,10 @@
+title: $:/core/ui/Palettes/Preview/Tiddler
+tags: $:/tags/Preview/Story
+
+\parameters (title)
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-border" style.border-color=<<colour tiddler-border>>>
+	<div class="tc-palette-preview-thumbnail-tiddler" style.background-color=<<colour tiddler-background>>>
+		<<palette-preview-component-list "$:/tags/Preview/Tiddler">>
+	</div>
+</div>
--- a/core/ui/Palettes/Preview/Tiddler/Body.tid
+++ b/core/ui/Palettes/Preview/Tiddler/Body.tid
@ -0,0 +1,15 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Body
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+
+<div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
+	<%if [<title>match[HelloThere]] %>
+		Lorem ipsum dolor sit amet, <<link "consectetur adipiscing elit">>. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. <<link "Nullam posuere facilisis purus sed">> consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex.
+	<%else%>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+		<<tab-set "Sed Metus Magna Placerat Ligula Imperdiet">>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+	<%endif%>
+</div>
+
--- a/core/ui/Palettes/Preview/Tiddler/Header.tid
+++ b/core/ui/Palettes/Preview/Tiddler/Header.tid
@ -0,0 +1,14 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Header
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-header">
+	<div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
+		<$text text=<<title>>/>
+	</div>
+	<div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
+		{{$:/core/images/down-arrow}}
+		{{$:/core/images/edit-button}}
+		{{$:/core/images/close-button}}
+	</div>
+</div>
--- a/core/ui/Palettes/Preview/Tiddler/Subtitle.tid
+++ b/core/ui/Palettes/Preview/Tiddler/Subtitle.tid
@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Subtitle
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
+	Motovun Jack
+</div>
--- a/core/ui/TagTemplate.tid
+++ b/core/ui/TagTemplate.tid
@ -7,7 +7,6 @@ title: $:/core/ui/TagTemplate
 		tag=<<currentTiddler>>
 		icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 		colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-		palette={{$:/palette}}
 		element-tag="$button"
 		element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[subfilter{$:/core/config/TagPillDragFilter}]" tag='span'"""
 	/>
--- a/core/wiki/background-actions/AutoCompilePalette.tid
+++ b/core/wiki/background-actions/AutoCompilePalette.tid
@ -0,0 +1,7 @@
+title: $:/core/background-actions/AutoCompilePalette
+tags: $:/tags/BackgroundAction $:/tags/StartupAction
+platforms: browser
+track-filter: [{$:/palette}get[color-scheme]] :map[subfilter<currentTiddler>] [{$:/palette}changecount[]addprefix{$:/palette}] [[$:/palette]changecount[]]
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
--- a/core/wiki/config/MediaQueryTrackers/DarkLightPreferred.tid
+++ b/core/wiki/config/MediaQueryTrackers/DarkLightPreferred.tid
@ -0,0 +1,5 @@
+title: $:/core/wiki/config/MediaQueryTrackers/DarkLightPreferred
+tags: $:/tags/MediaQueryTracker
+media-query: (prefers-color-scheme: dark)
+info-tiddler: $:/info/browser/darkmode
+info-tiddler-alt: $:/info/darkmode
--- a/core/wiki/currpalettepreview.tid
+++ b/core/wiki/currpalettepreview.tid
@ -1,52 +1,12 @@
 title: $:/snippets/currpalettepreview

-\define resolve-colour(macrocall)
-\import $:/core/macros/utils
 \whitespace trim
-<$wikify name="name" text="""$macrocall$""">
-<<name>>
-</$wikify>
-\end
-\define swatchStyle()
-background-color: $(swatchColour)$;
-\end
-\define swatch-inner()
-\whitespace trim
-<$set name="swatchColour" value={{##$(colourResolved)$}}>
-<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
-<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
-&#32;
-</$list>
-<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
-<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
-<<swatch-inner>>
-</$wikify>
-</$list>
-</$set>
-\end
-\define swatch()
-\whitespace trim
-<$set name="swatchColour" value={{##$(colour)$}}>
-<$set name="swatchTitle" value=<<colour>>>
-<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
-<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
-&#32;
-</$list>
-<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
-<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
-<<swatch-inner>>
-</$wikify>
-</$list>
-</$set>
-</$set>
-\end
-\whitespace trim
-<div class="tc-swatches-horiz"><$list filter="
-foreground
-background
-muted-foreground
-primary
-page-background
-tab-background
-tiddler-info-background
-" variable="colour"><<swatch>></$list></div>
+
+\import [all[shadows+tiddlers]tag[$:/tags/Preview/Helpers]!is[draft]sort[title]]
+
+<!-- currentTiddler is the palette to use -->
+<$palette.preview paletteTitle=<<currentTiddler>>>
+	<div class="tc-palette-preview-thumbnail" style.background-color=<<colour page-background>>>
+		<<palette-preview-component-list tag:"$:/tags/Preview/Page">>
+	</div>
+</$palette.preview>
--- a/core/wiki/macros/CSS.tid
+++ b/core/wiki/macros/CSS.tid
@ -1,17 +1,157 @@
 title: $:/core/macros/CSS
 tags: $:/tags/Macro

-<!-- Needs to stay that way for backwards compatibility. See GH issue: #8326 -->
-\define colour(name)
-\whitespace trim
-<$transclude tiddler={{$:/palette}} index="$name$">
-	<$transclude tiddler="$:/palettes/Vanilla" index="$name$">
-		<$transclude tiddler="$:/config/DefaultColourMappings/$name$"/>
-	</$transclude>
-</$transclude>
-\end
+\procedure actions-compile-palette-filtered(consolidatedPalette,outputPalette)
+<!-- Note the join, needed to cope with palette entries containing spaces -->
+\function tf.colour(name) [<consolidatedPalette>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :map[subfilter<currentTiddler>join[ ]]
+\function colour(name) [tf.colour<name>]
+\function color(name) [tf.colour<name>]
+<!-- Make the colour function use the input palette -->
+<$list filter="[<consolidatedPalette>indexes[]sort[]]" variable="colour-name">
+	<$let filter-text={{{ [<consolidatedPalette>getindex<colour-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<colour-name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] }}}>
+		<!-- Note the join, needed to cope with palette entries containing spaces -->
+		<$action-setfield $tiddler=<<outputPalette>> $index=<<colour-name>> $value={{{ [subfilter<filter-text>join[ ]] [<colour-name>addprefix[/* ]addsuffix[ */]] +[join[ ]] }}}/>
+	</$let>
+</$list>
+\end actions-compile-palette-filtered

-\define color(name) <<colour $name$>>
+\procedure actions-compile-palette-import(inputPalette,outputPalette,exclusions:"",scheme)
+<%if [enlist<exclusions>!match<inputPalette>count[]] :map[enlist<exclusions>count[]compare:number:eq<currentTiddler>] +[!match[]] %>
+		<$set name="exclusions" filter="[enlist<exclusions>] [<inputPalette>]">
+			<!-- Recursively import any imported palette -->
+			<$let
+				prefixed-palette-import={{{ [[palette-import@]addsuffix<scheme>] }}}
+				inputPalette={{{ [<inputPalette>get<prefixed-palette-import>has[title]] :else[<inputPalette>get[palette-import]] }}}
+			>
+				<%if [<inputPalette>has[title]] %>
+					<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<outputPalette>> exclusions=<<exclusions>> scheme=<<scheme>>/>
+				<%endif%>
+			</$let>
+			<!-- Copy the suffixed palette entries with the suffix stripped -->
+			<%if [<scheme>!is[blank]] %>
+				<$let
+					prefixed-scheme={{{ [<scheme>addprefix[@]] }}}
+				>
+					<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]suffix<prefixed-scheme>removesuffix<prefixed-scheme>sort[]]" $values="[<inputPalette>indexes[]suffix<prefixed-scheme>sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
+				</$let>
+			<%endif%
+			<!-- Copy the unsuffixed palette entries -->
+			<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]!regexp[@]sort[]]" $values="[<inputPalette>indexes[]!regexp[@]sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
+			<!-- Copy the fields from the palette -->
+			<$action-setmultiplefields $tiddler=<<outputPalette>> $fields="[<inputPalette>fields[]sort[]] -title -tags -text" $values="[<inputPalette>fields[]sort[]] -title -tags -text :map[<inputPalette>get<currentTiddler>]"/>
+		</$set>
+<%endif%>
+\end actions-compile-palette-import
+
+\procedure actions-compile-palette(inputPalette,outputPalette)
+\procedure tv-action-refresh-policy() always
+<$let
+	consolidatedPalette="$:/temp/palette-consolidated"
+>
+	<!-- Compute the current scheme -->
+	<$let
+		color-scheme-filter={{{ [<inputPalette>get[color-scheme]] :else[[light]] }}}
+		scheme={{{ [subfilter<color-scheme-filter>] }}}
+	>
+		<!-- Clear the consolidated palette that stores the result of flattening the chain of imported input palettes -->
+		<$action-deletetiddler $tiddler=<<consolidatedPalette>>/>
+		<$action-setfield $tiddler=<<consolidatedPalette>> type="application/x-tiddler-dictionary"/>
+		<!-- Clear the output palette that stores the plain CSS values of palette entries -->
+		<$action-deletetiddler $tiddler=<<outputPalette>>/>
+		<$action-setfield $tiddler=<<outputPalette>> type="application/x-tiddler-dictionary"/>
+		<!-- Import the background palettes -->
+		<$list filter="[all[shadows+tiddlers]tag[$:/tags/BackgroundPalette]sort[]]" variable="palette-name">
+			<$transclude $variable="actions-compile-palette-import" inputPalette=<<palette-name>> outputPalette=<<consolidatedPalette>> scheme=<<scheme>>/>
+		</$list>
+		<!-- Consolidate the chain of palettes -->
+		<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<consolidatedPalette>> scheme=<<scheme>>/>
+		<!-- Save the current scheme in the output tiddler -->
+		<$action-setfield $tiddler=<<outputPalette>> $field="color-scheme" $value=<<scheme>>/>
+		<!-- Compile the temporary palette to the output palette -->
+		<$transclude $variable="actions-compile-palette-filtered" consolidatedPalette=<<consolidatedPalette>> outputPalette=<<outputPalette>>/>
+	</$let>
+</$let>
+\end actions-compile-palette
+
+\procedure actions-recompile-current-palette()
+\procedure tv-action-refresh-policy() always
+<$transclude $variable="actions-compile-palette" inputPalette={{$:/palette}} outputPalette="$:/temp/palette-colours"/>
+\end actions-recompile-current-palette
+
+\procedure actions-switch-colour-palette(paletteTitle)
+\procedure tv-action-refresh-policy() always
+<$action-deletetiddler $tiddler="$:/temp/palette-colours"/>
+<<actions-recompile-current-palette>>
+\end actions-switch-colour-palette
+
+\procedure tv-palette-name() $:/temp/palette-colours
+
+\function tf.colour(name)
+[<tv-palette-name>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]]
+\end tf.colour
+
+\function colour(name)
+[tf.colour<name>]
+\end colour
+
+\function color(name)
+[tf.colour<name>]
+\end color
+
+\procedure colour-function-prefix()
+[tf.colour[
+\end colour-function-prefix
+
+\procedure colour-function-suffix()
+]]
+\end colour-function-suffix
+
+\widget $palette.preview(paletteTitle)
+	\whitespace trim
+	\function colour-inner-get-imported-palette(name,paletteTitle)
+	[[palette-import@]addsuffix<scheme>] :map[<paletteTitle>get<currentTiddler>has[title]] +[!match[]] :else[<paletteTitle>get[palette-import]has[title]] :map[function[colour-inner-get-palette-entry],<name>,<currentTiddler>] +[!match[]] 
+	\end colour-inner-get-imported-palette
+
+	\function colour-inner-get-palette-entry(name,paletteTitle)
+	[<name>addprefix[@]addprefix<scheme>] :map[<paletteTitle>getindex<currentTiddler>] +[!match[]] :else[<paletteTitle>getindex<name>] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :else[function[colour-inner-get-imported-palette],<name>,<paletteTitle>]
+	\end colour-inner-get-palette-entry
+
+	<!-- Note the join, needed to cope with palette entries containing spaces -->
+	\function tf.colour(name)
+	[function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
+	\end tf.colour
+
+	\function colour(name)
+	[tf.colour<name>]
+	\end colour
+
+	\function color(name)
+	[tf.colour<name>]
+	\end color
+
+	<$let
+		color-scheme-filter={{{ [<paletteTitle>get[color-scheme]] :else[[light]] }}}
+		scheme={{{ [subfilter<color-scheme-filter>] }}}
+	>
+		<$slot $name="ts-raw"/>
+	</$let>
+\end $palette.preview
+
+\function tf.colour-inner-transform-classic-palette-entry(colour-result)
+[<colour-result>prefix[<<colour ]suffix[>>]removeprefix[<<colour ]removesuffix[>>]addprefix<colour-function-prefix>addsuffix<colour-function-suffix>] :else[<colour-result>]
+\end tf.colour-inner-transform-classic-palette-entry
+
+\function tf.check-colour-contrast-subfunction()
+[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] +[colour-contrast:DeltaPhi[]fixed[3]]
+\end tf.check-colour-contrast-subfunction
+
+\function tf.check-colour-contrast(paletteEntryA,paletteEntryB,threshold)
+[function[tf.check-colour-contrast-subfunction]compare:number:gt<threshold>then[ok]] :else[function[tf.check-colour-contrast-subfunction]addsuffix[: ]addsuffix<paletteEntryA>addsuffix[/]addsuffix<paletteEntryB>addsuffix[ contrast is too low]]
+\end tf.check-colour-contrast
+
+\function tf.interpolate-colours(paletteEntryA,paletteEntryB,weight)
+[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] :apply[<weight>colour-interpolate:oklch<$1>,<$2>]
+\end tf.interpolate-colours

 \define box-shadow(shadow)
 ``
--- a/core/wiki/macros/lingo.tid
+++ b/core/wiki/macros/lingo.tid
@ -6,5 +6,5 @@ $:/language/
 \end

 \define lingo(title)
-{{$(lingo-base)$$title$}}
+{{||$(lingo-base)$$title$}}
 \end
--- a/core/wiki/macros/tag-picker.tid
+++ b/core/wiki/macros/tag-picker.tid
@ -166,7 +166,7 @@ The second ESC tries to close the "draft tiddler"
 <!-- keep those variables because they may "bleed" into macros using old syntax -->
 <!-- "nonSystemTagsFilter", "systemTagsFilter" __need to be the same__ as fields: "first-search-filter", "second-search-filter" -->
 <$let
-	palette={{$:/palette}}
+	palette="$:/temp/palette-colours"
 	colourA={{{ [<palette>getindex[foreground]] }}}
 	colourB={{{ [<palette>getindex[background]] }}}
 	fallbackTarget={{{ [<palette>getindex[tag-background]] }}}
--- a/core/wiki/macros/tag.tid
+++ b/core/wiki/macros/tag.tid
@ -28,15 +28,16 @@ color:$(foregroundColor)$;
 </$let>
 \end

+<!-- Note that the 'palette' parameter is unused and is only retained for backwards compatibility -->
 \define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions)
 \whitespace trim
 <$macrocall $name="tag-pill-inner"
 	tag=<<__tag__>>
 	icon=<<__icon__>>
 	colour=<<__colour__>>
-	fallbackTarget={{$palette$##tag-background}}
-	colourA={{$palette$##foreground}}
-	colourB={{$palette$##background}}
+	fallbackTarget=<<colour tag-background>>
+	colourA=<<colour foreground>>
+	colourB=<<colour background>>
 	element-tag=<<__element-tag__>>
 	element-attributes=<<__element-attributes__>>
 	actions=<<__actions__>>
@ -51,7 +52,6 @@ color:$(foregroundColor)$;
 			tag=<<__tag__>>
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-			palette={{$:/palette}}
 			element-tag=<<__element-tag__>>
 			element-attributes=<<__element-attributes__>>
 			actions=<<__actions__>>/>
--- a/core/wiki/palette.tid
+++ b/core/wiki/palette.tid
@ -1,3 +1,3 @@
 title: $:/palette

-$:/palettes/Vanilla
+$:/palettes/AutoToggle
--- a/core/wiki/paletteswitcher.tid
+++ b/core/wiki/paletteswitcher.tid
@ -1,19 +1,30 @@
 title: $:/snippets/paletteswitcher

+\parameters (thumbnails)
+
 \whitespace trim
-<$linkcatcher to="$:/palette">
-<div class="tc-chooser">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]!is[draft]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>
+\procedure actions()
+<$action-setfield $tiddler="$:/palette" text=<<navigateTo>>/>
+\end actions
+
+<!-- Display palette in currentTiddler with selection logic -->
+\procedure palette-entry(thumbnails)
+<div class={{{ [<currentTiddler>match{$:/palette}then[tc-chosen]] tc-chooser-item +[join[ ]] }}}>
+	<$link to={{!!title}} aria-label=`${[[$:/language/ControlPanel/Palette/Caption]get[text]]}$ - ${[all[current]get[name]]}$. ${[all[current]get[description]]}$`>
+		<%if [<thumbnails>match[yes]] %>
+			{{||$:/snippets/currpalettepreview}}
+		<%endif%>
+		''<$view field="name" format="text"/>''
+		<br>
+		<$view field="description" format="text"/>
+	</$link>
 </div>
+\end palette-entry
+
+<$linkcatcher actions=<<actions>>>
+	<div class={{{ tc-chooser [<thumbnails>match[yes]then[tc-chooser-cards]] +[join[ ]] }}}>
+		<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]!is[draft]sort[name]]">
+			<$transclude $variable="palette-entry" thumbnails=<<thumbnails>>/>
+		</$list>
+	</div>
 </$linkcatcher>
--- a/core/wiki/palettetests.tid
+++ b/core/wiki/palettetests.tid
@ -0,0 +1,19 @@
+title: $:/snippets/palettetests
+
+<$let failureCount={{{ [[$:/temp/palette-colours]indexes[]prefix[?]] :filter[[$:/temp/palette-colours]getindex<currentTiddler>!match[ok]] +[count[]] }}}>
+
+<%if [<failureCount>compare:number:gt[0]] %>
+
+Palette test failures: <$text text=<<failureCount>>/>
+
+<$list filter="[[$:/temp/palette-colours]indexes[]prefix[?]sort[]]" variable="name">
+	<%if [[$:/temp/palette-colours]getindex<name>!match[ok]] %>
+		<div>
+			''<$text text={{{ [<name>removeprefix[?]] }}}/>'': <$text text={{{ [[$:/temp/palette-colours]getindex<name>] }}}/>
+		</div>
+	<%endif%>
+</$list>
+
+<%endif%>
+
+</$let>
--- a/core/wiki/tags/PreviewPage.tid
+++ b/core/wiki/tags/PreviewPage.tid
@ -0,0 +1,2 @@
+title: $:/tags/Preview/Page
+list: $:/core/ui/Palettes/Preview/Alert $:/core/ui/Palettes/Preview/Notification $:/core/ui/Palettes/Preview/Story $:/core/ui/Palettes/Preview/Sidebar
--- a/core/wiki/tags/PreviewSideBar.tid
+++ b/core/wiki/tags/PreviewSideBar.tid
@ -0,0 +1,2 @@
+title: $:/tags/Preview/SideBar
+list: $:/core/ui/Palettes/Preview/Sidebar/Title $:/core/ui/Palettes/Preview/Sidebar/Subtitle $:/core/ui/Palettes/Preview/Sidebar/Search $:/core/ui/Palettes/Preview/Sidebar/Tabs
--- a/core/wiki/tags/PreviewTiddler.tid
+++ b/core/wiki/tags/PreviewTiddler.tid
@ -0,0 +1,2 @@
+title: $:/tags/Preview/Tiddler
+list: $:/core/ui/Palettes/Preview/Tiddler/Header $:/core/ui/Palettes/Preview/Tiddler/Subtitle $:/core/ui/Palettes/Preview/Tiddler/Body
--- a/editions/prerelease/tiddlers/palette.tid
+++ b/editions/prerelease/tiddlers/palette.tid
@ -1,3 +0,0 @@
-title: $:/palette
-
-$:/palettes/Vanilla
--- a/editions/prerelease/tiddlers/system/DefaultTiddlers.tid
+++ b/editions/prerelease/tiddlers/system/DefaultTiddlers.tid
@ -2,6 +2,8 @@ created: 20131127215321439
 modified: 20140912135951542
 title: $:/DefaultTiddlers

+[[Colour Handling Improvements Preview Build]]
+[[$:/PaletteManager]]
 [[TiddlyWiki Pre-release]]
 HelloThere
 [[Quick Start]]
--- a/editions/test/tiddlers/tests/data/filters/FilterRunPrefixesApply.tid
+++ b/editions/test/tiddlers/tests/data/filters/FilterRunPrefixesApply.tid
@ -0,0 +1,13 @@
+title: Filters/FilterRunPrefixes/Applu
+description: Applu filter run prefix
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+<$text text={{{ a b c :apply[<$1>addsuffix<$2>addsuffix<$3>] }}}/>
+
+title: ExpectedResult
+
+<p>abc</p>
--- a/editions/test/tiddlers/tests/data/macros/contrastcolour/ContrastColourBasic.tid
+++ b/editions/test/tiddlers/tests/data/macros/contrastcolour/ContrastColourBasic.tid
@ -0,0 +1,12 @@
+title: Macros/ContrastColour/ContrastColourBasic
+description: Basic usage of contrastcolour macro
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+Colour: <<contrastcolour target:#1e90ff fallbackTarget:#eecc66 colourA:#333333 colourB:#ffffff>>
+
+title: ExpectedResult
+
+<p>Colour: #ffffff</p>
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourBestContrast.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourBestContrast.tid
@ -0,0 +1,17 @@
+title: Operators/Colour/ColourBestContrast
+description: Best contrast colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[black]] [[gray]] [[green]] +[colour-best-contrast:DeltaPhi[]]
+
+title: ExpectedResult
+
+black
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourContrast.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourContrast.tid
@ -0,0 +1,17 @@
+title: Operators/Colour/ColourContrast
+description: Contrast colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[black]] [[gray]] +[colour-contrast:DeltaPhi[]trunc[]]
+
+title: ExpectedResult
+
+35
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourDarken.tid
@ -0,0 +1,17 @@
+title: Operators/Colour/ColourDarken
+description: Darken colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[#5778d8]colour-darken[0.5]]
+
+title: ExpectedResult
+
+#0f1d77
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid
@ -0,0 +1,21 @@
+title: Operators/Colour/ColourOklchL
+description: colour-set-oklch function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+=[[#5778d8]colour-get-oklch[]]
+=[[#5778d8]colour-get-oklch:l[]]
+=[[#5778d8]colour-get-oklch:c[]]
+=[[#5778d8]colour-get-oklch:h[]]
+[fixed[3]join[,]]
+
+title: ExpectedResult
+
+0.595,0.595,0.151,267.432
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid
@ -0,0 +1,18 @@
+title: Operators/Colour/ColourInterpolate
+description: colour-interpolate function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+0.2 0.5 0.99
+[colour-interpolate:oklch[#5778d8],[#d85757]join[,]]
+
+title: ExpectedResult
+
+oklch(60.08% 0.15344 290.55),oklch(60.956% 0.15699 325.23),oklch(62.386% 0.1628 381.88)
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourLighten.tid
@ -0,0 +1,17 @@
+title: Operators/Colour/ColourLighten
+description: Lighten colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[#5778d8]colour-lighten[0.5]]
+
+title: ExpectedResult
+
+#c6dbff
--- a/editions/test/tiddlers/tests/data/operators/colour/ColourSetOklch.tid
+++ b/editions/test/tiddlers/tests/data/operators/colour/ColourSetOklch.tid
@ -0,0 +1,17 @@
+title: Operators/Colour/ColourSetOklch
+description: colour-set-oklch function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+=[[#5778d8]colour-set-oklch[0.5]] =[[#5778d8]colour-set-oklch:l[0.5]] +[join[,]]
+
+title: ExpectedResult
+
+#3d5bb8,#3d5bb8
--- a/editions/test/tiddlers/tests/data/palettes/BasicLookup.tid
+++ b/editions/test/tiddlers/tests/data/palettes/BasicLookup.tid
@ -0,0 +1,45 @@
+
+title: Operators/Palettes/BasicLookup
+description: Basic palette lookups
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<colour page-background>>
+<<colour background>>
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+description: My custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyOtherPalette
+color-scheme: light
+
+page-background: <<colour custom>>
+custom: #f4e4d4
+
+title: MyOtherPalette
+name: My Other Palette
+description: My other custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+page-background: #d4e4f4
+background: red
+
+title: ExpectedResult
+
+<p>#f4e4d4 /* page-background */</p><p>red /* background */</p>
--- a/editions/test/tiddlers/tests/data/palettes/RecursivePalettes.tid
+++ b/editions/test/tiddlers/tests/data/palettes/RecursivePalettes.tid
@ -0,0 +1,61 @@
+
+title: Operators/Palettes/RecursivePalettes
+description: Palettes that import each other in a circular toop
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<colour page-background>>
+<<colour background>>
+<<colour custom>>
+<<colour foreground>>
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+description: My custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyOtherPalette
+color-scheme: light
+
+page-background: <<colour custom>>
+custom: #f4e4d4
+
+title: MyOtherPalette
+name: My Other Palette
+description: My other custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyFurtherPalette
+color-scheme: light
+
+page-background: #d4e4f4
+background: red
+
+title: MyFurtherPalette
+name: My Further Palette
+description: My further custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+xpalette-import: MyPalette
+color-scheme: light
+
+foreground: green
+
+title: ExpectedResult
+
+<p>+#f4e4d4 /* page-background */
+red /* background */
+#f4e4d4 /* custom */
+green /* foreground */</p>
--- a/editions/tw5.com/tiddlers/Colour
+++ b/editions/tw5.com/tiddlers/Colour
@ -0,0 +1,49 @@
+title: Colour Handling Improvements Preview Build
+modified: 20250204130756749
+
+! Things to Try
+
+* Toggle your operating system between dark and light modes, and see how the default AutoToggle palette automatically switches
+* Open $:/PaletteManager to see the new palette switcher with previews
+** Notice the settings panel that appears underneath the palette chooser for palettes that support custom settings
+** The palette manager can also be accessed in $:/ControlPanel under ''appearance'' -> ''palette''
+* Inspect the new palettes:
+** $:/palettes/AutoToggle automatically switches between two user selected palettes according to the current operating system dark/light mode setting
+** $:/palettes/TwentyTwenties derives all its colours from a small set of base colours, and provides a custom editor for tweaking those colours
+** $:/palettes/TwentyTwenties/Dark is a variant of the ~TwentyTwenties palette with a dark colour scheme
+** $:/palettes/TwentyTwenties/Green is a variant of the ~TwentyTwenties palette with a greenish colour scheme
+
+! New and Revised Documentation
+
+* [[Colour Spaces]]
+* ColourPalettes
+* [[colour-get-oklch Operator]]
+* [[colour-set-oklch Operator]]
+* [[colour-lighten Operator]]
+* [[colour-darken Operator]]
+* [[colour-contrast Operator]]
+* [[colour-best-contrast Operator]]
+* [[colour-interpolate Operator]]
+* [[colour-set-alpha Operator]]
+
+! Other Features Included in this PR
+
+The following features are required for the new colour handling system, but are general purpose, and may be cherry picked for earlier merging:
+
+* [[Background Actions]]
+* MediaQueryTrackerMechanism
+* [[changecount Operator]]
+* [[Apply Filter Run Prefix]]
+
+! Under the Covers
+
+The code for the palette compilation process can be found in $:/core/macros/CSS. The following tiddlers are generated by the compilation process:
+
+* $:/palette is the current palette tiddler
+* $:/temp/palette-consolidated is the result of merging the current palette with the chain of imported palettes. The palette entries are the raw values such as `<<colour background>>`, not the computed colours
+* $:/temp/palette-colours is the result of computing the colours for the current palette. The palette entries are CSS colour values that can be used directly
+
+Other parts of the mechanism:
+
+* $:/core/background-actions/AutoCompilePalette is the background action that recompiles the current palette if $:/palette changes, or if the colour scheme of the current palette changes
+* [[$:/core/wiki/config/MediaQueryTrackers/DarkLightPreferred]] is the media query tracker tiddler that tracks the operating system preference for dark or light mode into the tiddler $:/info/browser/darkmode
--- a/editions/tw5.com/tiddlers/_tw_shared/doc-utilities/doc-macros.tid
+++ b/editions/tw5.com/tiddlers/_tw_shared/doc-utilities/doc-macros.tid
@ -36,13 +36,56 @@ type: text/vnd.tiddlywiki
 		</h2>
 		<table class="tc-view-field-table">
 			<tbody>
-				<$list filter="[all[current]fields[]sort[title]] -title" template="$:/core/ui/TiddlerFieldTemplate" variable="listItem"/>
+				<$list filter="[all[current]fields[]sort[title]] -title -text" template="$:/core/ui/TiddlerFieldTemplate" variable="listItem"/>
 			</tbody>
 		</table>
+		<$codeblock code={{{ [<currentTiddler>get[text]] }}}/>
 	</div>
 </$tiddler>
 \end

+\procedure .demo-tiddler(tidText)
+	\procedure create-tiddler-actions()
+		<$action-setmultiplefields $tiddler=<<title>> $fields="[<jsonTiddler>jsonindexes[0]sort[]]" $values="[<jsonTiddler>jsonindexes[0]sort[]] :map[<jsonTiddler>jsonget[0],<currentTiddler>]"/>
+	\end create-tiddler-actions
+	<$let
+		jsonTiddler={{{ [<tidText>deserialize[application/x-tiddler]] }}}
+		title={{{ [<jsonTiddler>jsonget[0],[title]] }}}
+	>
+		<div class="doc-tiddler-fields">
+			<h2>
+			<$link to=<<title>>>
+				<$text text=<<title>>/>
+			</$link>
+			</h2>
+			<table class="tc-view-field-table">
+				<tbody>
+					<$list filter="[<jsonTiddler>jsonindexes[0]sort[]] -title -text" variable="listItem">
+						<tr class="tc-view-field">
+							<td class="tc-view-field-name">
+								<$text text=<<listItem>>/>
+							</td>
+							<td class="tc-view-field-value">
+								<$text text={{{ [<jsonTiddler>jsonget[0],<listItem>] }}}/>
+							</td>
+						</tr>
+					</$list>
+				</tbody>
+			</table>
+			<$codeblock code={{{ [<jsonTiddler>jsonget[0],[text]] }}}/>
+			<div>
+				<%if [<title>has[title]] %>
+					The tiddler '<$link to=<<title>>><$text text=<<title>>/></$link>' already exists
+				<%else%>
+					<$button actions=<<create-tiddler-actions>> class="tc-btn-big-green">
+						Create this tiddler
+					</$button>
+				<%endif%>
+			</div>
+		</div>
+	</$let>
+\end
+
 \function .mtitle(_) [<_>] Macro +[join[ ]]
 \function .otitle(_) [<_>] Operator +[join[ ]]
 \function .vtitle(_) [<_>] Variable +[join[ ]]
--- a/editions/tw5.com/tiddlers/concepts/Colour
+++ b/editions/tw5.com/tiddlers/concepts/Colour
@ -0,0 +1,44 @@
+title: Colour Spaces
+
+The list of currently supported colour spaces is given below. See the [[color.js website|https://colorjs.io/docs/spaces]] for details.
+
+* ''a98rgb-linear''
+* ''a98rgb''
+* ''acescc''
+* ''acescg''
+* ''cam16-jmh''
+* ''hct''
+* ''hpluv''
+* ''hsl''
+* ''hsluv''
+* ''hsv''
+* ''hwb''
+* ''ictcp''
+* ''jzazbz''
+* ''jzczhz''
+* ''lab-d65''
+* ''lab''
+* ''lch''
+* ''lchuv''
+* ''luv''
+* ''okhsl''
+* ''okhsv''
+* ''oklab''
+* ''oklch''
+* ''oklrab''
+* ''oklrch''
+* ''p3-linear''
+* ''p3''
+* ''prophoto-linear''
+* ''prophoto''
+* ''rec2020-linear''
+* ''rec2020''
+* ''rec2100-linear''
+* ''rec2100hlg''
+* ''rec2100pq''
+* ''srgb-linear''
+* ''srgb''
+* ''xyz-abs-d65''
+* ''xyz-d50''
+* ''xyz-d65''
+* ''xyz''
--- a/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid
+++ b/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid
@ -0,0 +1,33 @@
+created: 20241117161528913
+modified: 20241117161528913
+tags: [[Filter Operators]] [[Colour Operators]]
+title: colour-get-oklch Operator
+caption: colour-get-oklch
+op-purpose: retrieve components of colour values in the OKLCH colour space
+op-input: a selection of colour values
+op-suffix: "l", "c" or "h" to indicate which component of the colour to retrieve
+op-output: the values of the specified component of the input colours
+
+<<.from-version "5.4.0">> See [[Colour Palettes]] for background.
+
+The <<.op colour-get-oklch>> operator is used to retrieve components of colour values in the [[OKLCH|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch]] colour space. The OKLCH colour space expresses colours as three numbers:
+
+|!Id |!Name |!Range |
+|l |Lightness |0 – 1 |
+|c |Chroma |0 – 0.4 |
+|h |Hue |0 – 360 |
+
+The advantage of the OKLCH space is that it is perceptually uniform, meaning that equal changes in the numbers correspond to equal changes in the perceived colour.
+
+For example, this filter expression will get the lightness of the colour current page background colour:
+
+```
+[function[colour],[page-background]colour-get-oklch:l[]]
+```
+
+See also the following related operators:
+
+* <<.olink colour-set-oklch>> to modify a component of a colour value in the OKLCH colour space
+* <<.olink colour-lighten>> to lighten a colour value
+* <<.olink colour-darken>> to lighten a colour value
+
--- a/editions/tw5.com/tiddlers/filters/colour-interpolate.tid
+++ b/editions/tw5.com/tiddlers/filters/colour-interpolate.tid
@ -0,0 +1,56 @@
+created: 20241117161528913
+modified: 20241117161528913
+tags: [[Filter Operators]] [[Colour Operators]]
+title: colour-interpolate Operator
+caption: colour-interpolate
+op-purpose: smoothly interpolate between a pair of colours
+op-input: one or more indexes where 0 is the first colour and 1 is the last colour and intermediate values are smoothly interpolated
+op-suffix: the <<.op colour-interpolate>> operator uses a rich suffix, see below for details
+op-parameter: two colour values
+op-output: the values of the interpolated colours
+
+\procedure interpolate-example(filter,description)
+<$transclude $variable="description"/>
+
+<$codeblock code=<<filter>>/>
+
+<$list filter=<<filter>>>
+<div style.display="inline-block" style.width="15px" style.height="15px" style.background-color=<<currentTiddler>>></div>
+</$list>
+\end interpolate-example
+
+<<.from-version "5.4.0">> See [[Colour Palettes]] for background.
+
+The <<.op colour-interpolate>> operator is used to interpolate colour values in a chosen colour space. It uses an extended syntax that permits multiple additional parameters to be passed:
+
+```
+[colour-interpolate:<colour space>:<hue adjuster>[<colourA>],[<colourB>]]
+```
+
+* ''colour space'': The name of the colour space to be used for the interpolation such as "OkLCh" or "sRGB". The full list of colour spaces that can be used for interpolation is given in [[Colour Spaces]]
+* ''hue adjuster'': For color spaces with a hue angle there are multiple ways to interpolate, which can produce drastically different results. The hue adjuster suffix allows the interpolation type to be controlled. It can be set to "raw", "increasing", "decreasing", "longer" or "shorter" (the default). See [[Colour Interpolation Hues]] for more details
+
+Two colour parameters are required. If there are fewer than two input colours, the operator will return an empty result. If there are more than two input colours, the operator will ignore the additional colours.
+
+Note that indexes outside the range 0 to 1 will extrapolate from the provided colour values.
+
+<<interpolate-example "0 0.333 0.666 1 +[colour-interpolate:oklch[red],[purple]]" """
+For example, this filter expression will return 4 colours that smoothly blend from red to purple in the OKLCH colour space:
+""">>
+
+<<interpolate-example "[range[0],[1],[0.05]colour-interpolate:oklch[red],[purple]]" """
+The range operator can be used to generate a series of weights:
+""">>
+
+<<interpolate-example "[range[0],[1],[0.05]colour-interpolate:oklch:raw[red],[purple]]" """
+Notice how the ''raw'' hue adjuster produces a rainbow effect:
+""">>
+
+<<interpolate-example "[range[0],[1],[0.1]colour-interpolate[black],[white]] =[range[0.1],[1],[0.1]colour-interpolate[white],[black]]" """
+Interpolations can be appended together:
+""">>
+
+See also the following related operators:
+
+* <<.olink colour-get-oklch>> to retrieve a component of a colour value in the OKLCH colour space
+* <<.olink colour-set-oklch>> to set a component of a colour value in the OKLCH colour space
--- a/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid
+++ b/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid
@ -0,0 +1,34 @@
+created: 20241117161528913
+modified: 20241117161528913
+tags: [[Filter Operators]] [[Colour Operators]]
+title: colour-set-oklch Operator
+caption: colour-set-oklch
+op-purpose: manipulate colour values in the OKLCH colour space
+op-input: a selection of colour values
+op-suffix: "l", "c" or "h" to indicate which component of the colour to modify
+op-parameter: value of the property to modify
+op-output: the values of the modified colours
+
+<<.from-version "5.4.0">> See [[Colour Palettes]] for background.
+
+The <<.op colour-set-oklch>> operator is used to manipulate colour values in the [[OKLCH|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch]] colour space. The OKLCH colour space expresses colours as three numbers:
+
+|!Id |!Name |!Range |
+|l |Lightness |0 – 1 |
+|c |Chroma |0 – 0.4 |
+|h |Hue |0 – 360 |
+
+The advantage of the OKLCH space is that it is perceptually uniform, meaning that equal changes in the numbers correspond to equal changes in the perceived colour.
+
+For example, this filter expression will alter the lightness of the current page background colour to 0.1:
+
+```
+[function[colour],[page-background]colour-set-oklch:l[0.1]]
+```
+
+See also the following related operators:
+
+* <<.olink colour-get-oklch>> to retrieve a component of a colour value in the OKLCH colour space
+* <<.olink colour-lighten>> to lighten a colour value
+* <<.olink colour-darken>> to lighten a colour value
+
--- a/editions/tw5.com/tiddlers/filters/syntax/Apply
+++ b/editions/tw5.com/tiddlers/filters/syntax/Apply
@ -0,0 +1,24 @@
+created: 20250212154426403
+from-version: 5.4.0
+modified: 20250212154426403
+rp-input: the filter output of all previous runs so far
+rp-output: the result of evaluating the filter run
+rp-purpose: make input titles available as variables when evaluating this filter run
+tags: [[Named Filter Run Prefix]]
+title: Apply Filter Run Prefix
+type: text/vnd.tiddlywiki
+
+<$railroad text="""
+\start none
+\end none
+( ":apply" | - )
+[[run|"Filter Run"]]
+"""/>
+
+The input titles from previous runs are made available to this run as numeric variables <<.var $1>>, <<.var $2>>, <<.var $3>> etc. The results of the filter run are the output titles.
+
+The `:apply` filter run prefix is useful when using computed values as the parameters of operators. For example:
+
+```
+=[<first>addsuffix<s>] =[<second>addsuffix<s>] :apply[function[process],<$1>,<$2>]
+```
--- a/editions/tw5.com/tiddlers/mechanisms/Background
+++ b/editions/tw5.com/tiddlers/mechanisms/Background
@ -0,0 +1,21 @@
+title: Background Actions
+created: 20250212154426403
+modified: 20250212154426403
+
+<<.demo-tiddler """
+title: SampleBackgroundAction: Story Change
+tags: $:/tags/BackgroundAction
+track-filter: [list[$:/StoryList]]
+
+<$action-sendmessage $message="tm-notify" $param="SampleBackgroundAction: Story Change" list={{$:/StoryList!!list}}/>
+
+Story List:
+
+<ol>
+<$list filter="[enlist<list>]">
+<li>
+<$text text=<<currentTiddler>>/>
+</li>
+</$list>
+</ol>
+""">>
--- a/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid
+++ b/editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid
@ -4,8 +4,8 @@ tags: Mechanisms
 title: InfoMechanism
 type: text/vnd.tiddlywiki

-\define example(name)
-<$transclude tiddler="""$:/info/url/$name$""" mode="inline"/>
+\procedure example(name)
+<$text text={{{ [[$:/info/url/]addsuffix<name>get[text]] }}} />
 \end

 System tiddlers in the namespace `$:/info/` are used to expose information about the system (including the current browser) so that WikiText applications can adapt themselves to available features.
@ -19,6 +19,8 @@ System tiddlers in the namespace `$:/info/` are used to expose information about
 |[[$:/info/browser/language]] |<<.from-version "5.1.20">> Language as reported by browser (note that some browsers report two character codes such as `en` while others report full codes such as `en-GB`) |
 |[[$:/info/browser/screen/width]] |Screen width in pixels |
 |[[$:/info/browser/screen/height]] |Screen height in pixels |
+|[[$:/info/browser/darkmode]] |<<.from-version "5.4.0">> Is dark mode preferred? ("yes" or "no") |
+|[[$:/info/darkmode]] |<<.deprecated-since "5.4.0">> Alias for  $:/info/browser/darkmode |
 |[[$:/info/node]] |Running under [[Node.js]]? ("yes" or "no") |
 |[[$:/info/url/full]] |<<.from-version "5.1.14">> Full URL of wiki (eg, ''<<example full>>'') |
 |[[$:/info/url/host]] |<<.from-version "5.1.14">> Host portion of URL of wiki (eg, ''<<example host>>'') |
@ -28,4 +30,3 @@ System tiddlers in the namespace `$:/info/` are used to expose information about
 |[[$:/info/url/port]] |<<.from-version "5.1.14">> Port portion of URL of wiki (eg, ''<<example port>>'') |
 |[[$:/info/url/protocol]] |<<.from-version "5.1.14">> Protocol portion of URL of wiki (eg, ''<<example protocol>>'') |
 |[[$:/info/url/search]] |<<.from-version "5.1.14">> Search portion of URL of wiki (eg, ''<<example search>>'') |
-|[[$:/info/darkmode]] |<<.from-version "5.1.23">> Is dark mode enabled? ("yes" or "no") |
--- a/editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid
+++ b/editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid
@ -0,0 +1,10 @@
+title: MediaQueryTrackerMechanism
+tags: Mechanisms
+
+<<.from-version "5.4.0">> The media query tracker mechanism allows you to define [[custom CSS media queries|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries]] to be bound to a specified [[info|InfoMechanism]] tiddler. The info tiddler will be dynamically update to reflect the current state of the media query.
+
+Adding or modifying a tiddler tagged $:/tags/MediaQueryTracker takes effect immediately.
+
+The media queries are always applied against the main window. This is relevant for viewport related media queries such as `min-width` which will always respect the main window and ignore the sizes of any external windows.
+
+The core includes a media query tracker that is used for tracking the operating system dark/light setting. See $:/core/wiki/config/MediaQueryTrackers/DarkLightPreferred for details.
--- a/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid
+++ b/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid
@ -3,6 +3,8 @@ modified: 20140912135951542
 title: $:/DefaultTiddlers
 type: text/vnd.tiddlywiki

+[[Colour Handling Improvements Preview Build]]
+[[$:/PaletteManager]]
 HelloThere
 [[Quick Start]]
 [[Find Out More]]
--- a/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
+++ b/editions/tw5.com/tiddlers/system/tw5.com-styles.tid
@ -91,13 +91,13 @@ type: text/vnd.tiddlywiki
 	border-radius: 5px;
 	background: <<colour "download-background">>;
 	border: none;
-	box-shadow: 1px 2px 2px 0 <<colour muted-foreground>>;
+	box-shadow: 1px 2px 2px 0 <<colour download-foreground>>;
 	overflow: hidden;
 	cursor: pointer;
 	font-size: 1.2em;
 	line-height: 1.4em;
-	color: #fff;
-	fill: #fff;
+	color: <<colour download-foreground>>;
+	fill: <<colour download-foreground>>;
 }

 .tc-btn-download:active {
--- a/plugins/tiddlywiki/codemirror/styles.tid
+++ b/plugins/tiddlywiki/codemirror/styles.tid
@ -10,7 +10,7 @@ name: tiddlywiki
 </$set>
 \end
 \define set-fat-cursor-background-colours(palette)
-<$macrocall $name="set-fat-cursor-background-css" colour={{$palette$##foreground}} colourA="#77ee77" colourB="#586e75"/>
+<$macrocall $name="set-fat-cursor-background-css" colour=<<colour foreground>> colourA="#77ee77" colourB="#586e75"/>
 \end
 \define set-fat-cursor-background()
 <$macrocall $name="set-fat-cursor-background-colours" palette={{$:/palette}}/>
@ -28,7 +28,7 @@ name: tiddlywiki
 </$wikify>
 \end
 \define set-selection-background-colours(palette)
-<$macrocall $name="set-selection-background-css" colour={{$palette$##foreground}} colourA={{{ [{$palette$##selection-background}!match[]!prefix[<<]!suffix[>>]] ~#073642 }}} colourB={{{ [{$palette$##selection-background}!match[]!prefix[<<]!suffix[>>]] ~#eee8d5 }}} tiddlerEditorBackground={{$palette$##tiddler-editor-background}}/>
+<$macrocall $name="set-selection-background-css" colour=<<colour foreground>> colourA={{{ [function[colour],[selection-background]!match[]else[#073642]] }}} colourB={{{ [function[colour],[selection-background]!match[]else[#eee8d5]] }}} tiddlerEditorBackground=<<colour tiddler-editor-background>>/>
 \end
 \define set-selection-background()
 <$macrocall $name="set-selection-background-colours" palette={{$:/palette}}/>
--- a/plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids
+++ b/plugins/tiddlywiki/consent-banner/config/DefaultColourMappings.multids
@ -1,4 +1,6 @@
-title: $:/config/DefaultColourMappings/
+title: $:/plugins/tiddlywiki/consent-banner/background-palette
+type: application/x-tiddler-dictionary
+tags: $:/tags/BackgroundPalette

 consent-banner-backdrop-background: rgba(0,0,0,0.2)
 consent-banner-background: #009677
--- a/plugins/tiddlywiki/menubar/background-palette.tid
+++ b/plugins/tiddlywiki/menubar/background-palette.tid
@ -0,0 +1,6 @@
+title: $:/plugins/tiddlywiki/menubar/background-palette
+type: application/x-tiddler-dictionary
+tags: $:/tags/BackgroundPalette
+
+menubar-foreground: #fff
+menubar-background: #5778d8
--- a/plugins/tiddlywiki/menubar/config-DefaultColourMappings.multids
+++ b/plugins/tiddlywiki/menubar/config-DefaultColourMappings.multids
@ -1,4 +0,0 @@
-title: $:/config/DefaultColourMappings/
-
-menubar-foreground: #fff
-menubar-background: #5778d8
--- a/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids
+++ b/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids
@ -1,4 +1,6 @@
-title: $:/config/DefaultColourMappings/
+title: $:/plugins/tiddlywiki/tour/background-palette
+type: application/x-tiddler-dictionary
+tags: $:/tags/BackgroundPalette

 tour-chooser-button-foreground: <<colour very-muted-foreground>>
 tour-chooser-button-hover-background: <<colour muted-foreground>>
--- a/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid
+++ b/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid
@ -45,9 +45,9 @@ color:$(foregroundColor)$;
 	tag=<<__tag__>>
 	icon=<<__icon__>>
 	colour=<<__colour__>>
-	fallbackTarget={{$palette$##tag-background}}
-	colourA={{$palette$##foreground}}
-	colourB={{$palette$##background}}
+	fallbackTarget=<<colour tag-background>>
+	colourA=<<colour foreground>>
+	colourB=<<colour background>>
 	element-tag=<<__element-tag__>>
 	element-attributes=<<__element-attributes__>>
 	actions=<<__actions__>>
@ -62,7 +62,6 @@ color:$(foregroundColor)$;
 			tag=<<currentTiddler>>
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-			palette={{$:/palette}}
 			element-tag="$button"
 			element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[all[current]tagging[]]" tag='span'"""
 			prefix=<<prefix>>
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@ -429,7 +429,7 @@ Tiddler frame in story river
 }

 :root {
-	color-scheme: {{{ [{$:/palette}get[color-scheme]] ~light }}};
+	color-scheme: {{{ [{$:/temp/palette-colours!!color-scheme}] ~light }}};
 }

 /*
@ -2822,8 +2822,20 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 .tc-chooser {
 	border-right: 1px solid <<colour table-header-background>>;
 	border-left: 1px solid <<colour table-header-background>>;
+	white-space: pre-wrap;
 }

+.tc-chooser .tc-chooser-item.tc-chosen {
+	outline: 2px solid <<colour primary>>;
+}
+
+.tc-chooser.tc-chooser-cards {
+	border-radius: 6px;
+	background-color: <<colour table-header-background>>;
+	display: flex;
+	flex-wrap: wrap;
+	border: none;
+}

 .tc-chooser-item {
 	border-bottom: 1px solid <<colour table-header-background>>;
@ -2831,6 +2843,15 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	padding: 2px 4px 2px 14px;
 }

+.tc-chooser.tc-chooser-cards .tc-chooser-item {
+	background-color: <<colour background>>;
+	width: 220px;
+	margin: 0.5em;
+	padding: 6px;
+	border: 1px solid <<colour muted-foreground>>;
+	border-radius: 3px;
+}
+
 .tc-drop-down .tc-chooser-item {
 	padding: 2px;
 }
@ -2845,10 +2866,23 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	cursor:default;
 }

+.tc-chosen > .tc-tiddlylink:before {
+	margin-left: -10px;
+	position: relative;
+	content: "» ";
+}
+
+.tc-chooser.tc-chooser-cards .tc-chosen > .tc-tiddlylink:before {
+	margin: 0;
+	content: "";
+}
+
 .tc-chooser-item .tc-tiddlylink {
 	display: block;
 	text-decoration: none;
 	background-color: transparent;
+	font-weight: normal;
+	color: <<colour foreground>>;
 }

 .tc-chooser-item:hover .tc-tiddlylink:hover {
@ -2860,12 +2894,6 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	color: <<colour foreground>>;
 }

-.tc-chosen > .tc-tiddlylink:before {
-	margin-left: -10px;
-	position: relative;
-	content: "» ";
-}
-
 .tc-chooser-item svg,
 .tc-chooser-item img{
 	max-width: 1em;
@ -2904,6 +2932,152 @@ input.tc-palette-manager-colour-input {
 	padding: 0;
 }

+.tc-palette-preview-thumbnail {
+	display: inline-block;
+	position: relative;
+	padding: 0.5em 0.5em 0 0.5em;
+	display: flex;
+	flex-direction: row;
+	font-weight: normal;
+	color: <<colour foreground>>;
+	line-height: 1.2;
+}
+
+.tc-palette-preview-thumbnail-tab-buttons {
+	font-size: 0.55em;
+	padding-top: 2em;
+}
+
+.tc-palette-preview-thumbnail-sidebar .tc-palette-preview-thumbnail-tab-buttons {
+	font-size: 0.07em;
+}
+
+
+.tc-palette-preview-thumbnail-tab-button {
+	display: inline-block;
+	padding: 1px 1px 1px 1px;
+	margin-right: 0.3em;
+	font-weight: normal;
+	border: none;
+	background: inherit;
+	border-left-width: 0.5px;
+	border-left-style: solid;
+	border-top-width: 0.5px;
+	border-top-style: solid;
+	border-right-width: 0.5px;
+	border-right-style: solid;
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.tc-palette-preview-thumbnail-tab-divider {
+	border-top-width: 0.5px;
+	border-top-style: solid;
+	margin-bottom: 3px;
+}
+
+.tc-palette-preview-thumbnail-sidebar-list {
+	font-size: 0.10em;
+	line-height: 1.5;
+}
+
+.tc-palette-preview-thumbnail-alert {
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 35em;
+	font-size: 2px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-alert-border {
+	border-width: 1px;
+	border-style: solid;
+	padding: 3px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-notification {
+	position: absolute;
+	right: 3px;
+	top: 3px;
+	width: 25em;
+	font-size: 2px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-notification-border {
+	border-width: 1px;
+	border-style: solid;
+	padding: 3px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-story {
+	flex-grow: 2;
+}
+
+.tc-palette-preview-thumbnail-tiddler-border {
+	border-width: 1px;
+	border-style: solid;
+	margin-bottom: 0.5em;
+}
+
+.tc-palette-preview-thumbnail-tiddler {
+	padding: 0.5em;
+}
+
+.tc-palette-preview-thumbnail-tiddler-header {
+	display: flex;
+	justify-content: space-between;
+}
+
+.tc-palette-preview-thumbnail-tiddler-title {
+	font-size: 6px;
+}
+
+.tc-palette-preview-thumbnail-tiddler-toolbar {
+	line-height: 0;
+}
+
+.tc-palette-preview-thumbnail-tiddler-toolbar svg {
+	width: 6px;
+	height: 6px;
+}
+
+.tc-palette-preview-thumbnail-tiddler-subtitle {
+	font-size: 3px;
+}
+
+.tc-palette-preview-thumbnail-tiddler-body {
+	font-size: 3px;
+}
+
+.tc-palette-preview-thumbnail-sidebar {
+	flex-grow: 1;
+	padding: 0.5em;
+}
+
+.tc-palette-preview-thumbnail-sidebar-title {
+	font-size: 6px;
+}
+
+.tc-palette-preview-thumbnail-sidebar-subtitle {
+	font-size: 3px;
+}
+
+.tc-palette-preview-thumbnail-sidebar-search {
+	margin:3px 0;
+	line-height: 0;
+	width: 70%;
+}
+
+.tc-palette-preview-thumbnail-sidebar-search-box {
+	height: 4px;
+}
+
 /*
 ** Table of contents
 */