Introduce new MediaQueryTrackerMechanism, and use it for dark mode

core/modules/info/mediaquerytracker.js

@@ -0,0 +1,48 @@
+/*\
+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) {
+	var infoTiddlerFields = [];
+	if($tw.browser) {
+		// Get the media query tracker tiddlers
+		var trackers = $tw.wiki.getTiddlersWithTag("$:/tags/MediaQueryTracker");
+		$tw.utils.each(trackers,function(title) {
+			var 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
+					var mqList = window.matchMedia(mediaQuery);
+					function getResultTiddlers() {
+						var value = mqList.matches ? "yes" : "no",
+							tiddlers = [{title: infoTiddler, text: value}];
+						if(infoTiddlerAlt) {
+							tiddlers.push({title: infoTiddlerAlt, text: value})
+						}
+						return tiddlers;
+					};
+					infoTiddlerFields.push.apply(infoTiddlerFields,getResultTiddlers());
+					mqList.addListener(function(event) {
+						updateInfoTiddlersCallback(getResultTiddlers());
+					});
+				}
+			}
+		});
+	}
+	return infoTiddlerFields;
+};
+
+})();

core/modules/info/platform.js

@@ -36,13 +36,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 || ""});
 	}

core/wiki/config/MediaQueryTrackers/DarkLightSwitch.tid

@@ -0,0 +1,5 @@
+title: $:/core/wiki/config/MediaQueryTrackers/DarkLightSwitch
+tags: $:/tags/MediaQueryTracker
+media-query: (prefers-color-scheme: dark)
+info-tiddler: $:/info/browser/darkmode
+info-tiddler-alt: $:/info/darkmode

editions/tw5.com/tiddlers/mechanisms/InfoMechanism.tid

@@ -4,8 +4,8 @@ tags: Mechanisms
 title: InfoMechanism
 type: text/vnd.tiddlywiki
 
-\define example(name)
+\procedure example(name)
-<$transclude tiddler="""$:/info/url/$name$""" mode="inline"/>
+<$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.3.6">> Is dark mode enabled? ("yes" or "no") |
+|[[$:/info/darkmode]] |<<.deprecated-since "5.3.6">> 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") |

editions/tw5.com/tiddlers/mechanisms/MediaQueryTrackerMechanism.tid

@@ -0,0 +1,8 @@
+title: MediaQueryTrackerMechanism
+tags: Mechanisms
+
+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 will only take effect when the wiki is reloaded
+
+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.