add browser dark/light theme detection
This commit is contained in:
parent
4b56cb4298
commit
6bdbb321d9
|
@ -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/width", text: window.screen.width.toString()});
|
||||||
infoTiddlerFields.push({title: "$:/info/browser/screen/height", text: window.screen.height.toString()});
|
infoTiddlerFields.push({title: "$:/info/browser/screen/height", text: window.screen.height.toString()});
|
||||||
// Dark mode through event listener on MediaQueryList
|
// Dark mode through event listener on MediaQueryList
|
||||||
var mqList = window.matchMedia("(prefers-color-scheme: dark)"),
|
var mqList = window.matchMedia("(prefers-color-scheme: dark)"),
|
||||||
getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};};
|
getDarkModeTiddler = function() {return {title: "$:/info/darkmode", text: mqList.matches ? "yes" : "no"};};
|
||||||
infoTiddlerFields.push(getDarkModeTiddler());
|
infoTiddlerFields.push(getDarkModeTiddler());
|
||||||
mqList.addListener(function(event) {
|
mqList.addEventListener("change", function(event){
|
||||||
updateInfoTiddlersCallback([getDarkModeTiddler()]);
|
updateInfoTiddlersCallback([getDarkModeTiddler()]);
|
||||||
});
|
// activate all actions tagged $:/tags/DarkLightChangeActions
|
||||||
|
$tw.rootWidget.invokeActionsByTag("$:/tags/DarkLightChangeActions",event,{"dark-mode":mqList.matches ? "yes" : "no"});
|
||||||
|
});
|
||||||
// Language
|
// Language
|
||||||
infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""});
|
infoTiddlerFields.push({title: "$:/info/browser/language", text: navigator.language || ""});
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
created: 20231101120147664
|
||||||
|
modified: 20231101124455520
|
||||||
|
tags: Features
|
||||||
|
title: DarkLightChangeActions
|
||||||
|
type: text/vnd.tiddlywiki
|
||||||
|
|
||||||
|
<<.from-version "5.3.2">> Actions tagged <<tag "$:/tags/DarkLightChangeActions">> 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.<br>
|
||||||
|
|
||||||
|
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: <<tag "$:/tags/Palette">> <- 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={{{ [<dark-mode>match[yes]then<darkPalette>else<lightPalette>] }}} />
|
||||||
|
```
|
||||||
|
|
||||||
|
!! 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`""">>
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue