diff --git a/core/modules/info/platform.js b/core/modules/info/platform.js index 0eb0b9ea8..40b94081f 100644 --- a/core/modules/info/platform.js +++ b/core/modules/info/platform.js @@ -37,12 +37,14 @@ exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) { infoTiddlerFields.push({title: "$:/info/browser/screen/width", text: window.screen.width.toString()}); infoTiddlerFields.push({title: "$:/info/browser/screen/height", text: window.screen.height.toString()}); // Dark mode through event listener on MediaQueryList - var mqList = window.matchMedia("(prefers-color-scheme: dark)"), - getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};}; - infoTiddlerFields.push(getDarkModeTiddler()); - mqList.addListener(function(event) { - updateInfoTiddlersCallback([getDarkModeTiddler()]); - }); + var mqList = window.matchMedia("(prefers-color-scheme: dark)"), + getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};}; + infoTiddlerFields.push(getDarkModeTiddler()); + mqList.addEventListener("change", function(event){ + updateInfoTiddlersCallback([getDarkModeTiddler()]); + // activate all actions tagged $:/tags/DarkLightChangeActions + $tw.rootWidget.invokeActionsByTag("$:/tags/DarkLightChangeActions",event,{"dark-mode":mqList.matches ? "yes" : "no"}); + }); // Language infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""}); } diff --git a/editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid b/editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid new file mode 100644 index 000000000..2ed502f44 --- /dev/null +++ b/editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid @@ -0,0 +1,39 @@ +created: 20231101120147664 +modified: 20231101124455520 +tags: Features +title: DarkLightChangeActions +type: text/vnd.tiddlywiki + +<<.from-version "5.3.2">> Actions tagged <> are executed whenever the browser or OS dark / light setting is changed. + +<<.tip """Be aware, that the browser setting can be independent from the OS setting.
+ +If the browser settings are set to "System theme - auto" for ~FireFox or "System default" for Chrome-like browsers, the OS setting will be shown. """>> + +Also see [[SystemTag: $:/tags/DarkLightChangeActions]] + +!! Variables + +The following variable is defined for all actions DarkLightChangeActions + +| Variables | Description |h +|`dark-mode` |`yes` or `no` depending on the browser or OS setting | + +!! Exmample + +The following example defines the $:/palette tiddler based on the dark / light mode setting. Palettes are tagged: <> <- This tag-pill dropdown can be used to see all possible palette tiddlers. + +``` +title: test-AutoSwitchPalette +tags: $:/tags/DarkLightChangeActions + +\define darkPalette() $:/palettes/GruvboxDark +\define lightPalette() $:/palettes/Vanilla + +<$action-setfield $tiddler="$:/palette" text={{{ [match[yes]thenelse] }}} /> +``` + +!! InfoMechanism + +<<.warning """The system info tiddler $:/info/darkmode will be dynamically updated ''after'' the actions have been executed. So it's important to use the variable `dark-mode`""">> + diff --git a/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_DarkLightChangeActions.tid b/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_DarkLightChangeActions.tid new file mode 100644 index 000000000..41cd15fb3 --- /dev/null +++ b/editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_DarkLightChangeActions.tid @@ -0,0 +1,11 @@ +caption: $:/tags/DarkLightChangeActions +created: 20231101115650094 +description: marks actions executed on dark / light mode changes +modified: 20231101120653921 +tags: SystemTags +title: SystemTag: $:/tags/DarkLightChangeActions + +The [[system tag|SystemTags]] `$:/tags/DarkLightChangeActions` marks actions executed on dark / light mode changes. + +* <<.from-version "5.3.2">> DarkLightChangeActions +* $:/info/darkmode