mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

add browser dark/light theme detection

This commit is contained in:
pmario 2023-11-01 13:46:09 +01:00
parent 4b56cb4298
commit 6bdbb321d9
3 changed files with 58 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/modules/info/platform.js
View File

@ -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 || ""});
}

39
editions/tw5.com/tiddlers/features/DarkLightChangeActions.tid Normal file
View File

@ -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`""">>

11
editions/tw5.com/tiddlers/systemtags/SystemTag_ $__tags_DarkLightChangeActions.tid Normal file
View File

@ -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