{"tiddlers":{"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-examples":{"title":"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-examples","text":"\\procedure lightDarkwatchTitle() _/dynamic/light-dark/detection\n\\procedure startupwatchTitle() _/startup/light-dark/detection\n\n\\procedure dynamicLightDarkActionTemplate()\n<$reveal type=\"match\" stateTitle=\"$:/config/palette/enable-light-dark-detection\" text=\"yes\">\n\t<$let default={{{ [<dark-mode>match[yes]then[$:/config/palette/default-dark]else[$:/config/palette/default-light]] }}}>\n\t\t<$action-setfield $tiddler=\"$:/palette\" text={{{ [<default>get[text]] }}}/>\n\t</$let>\n</$reveal>\n\\end\n\n\\procedure createLightDarkwatch()\n<% if [<lightDarkwatchTitle>!has[text]] %>\n<$action-createtiddler\n\t$basetitle=<<lightDarkwatchTitle>>\n\ttext=<<dynamicLightDarkActionTemplate>>\n\tcaption= \"Dynamically detect browser or OS setting\"\n\tcode-body= \"yes\"\n\ttags= \"$:/tags/DarkLightChangeActions\"\n/>\n<$action-navigate $to=<<lightDarkwatchTitle>>/>\n<% else %>\n<$action-navigate $to=<<lightDarkwatchTitle>>/>\n<% endif %>\n\\end\n\n!! Dynamically Detect Browser or OS Light / Dark Theme Changes\n\nAlso see: [[DarkLightChangeActions|$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions]] and [[SystemTag: $:/tags/DarkLightChangeActions|$:/plugins/wikilabs/palette-watch/docs/SystemTag: $:/tags/DarkLightChangeActions]]\n\n''Important:''\n\nIt is important to use the variable `dark-mode`, since the system info tiddler $:/info/darkmode will be ''updated after'' the actions have been executed.\n\nChanging the $:/palette tiddler dynamically ''will trigger'' the [[dirty flag|https://tiddlywiki.com/#SavingMechanism]]. If you want to avoid this behaviour, you will need to add `-[[$:/palette]]` to the the  $:/config/SaverFilter as described at [[SavingMechanism|https://tiddlywiki.com/#SavingMechanism]]\n\nThe following example dynamically defines the $:/palette tiddler based on the browser or OS dark / light mode setting. Palettes are tagged: <<tag \"$:/tags/Palette\">> -- The tag-pill dropdown can be used to see all possible palette tiddlers.\n\nCurrently the following tiddlers are tagged <<tag \"$:/tags/DarkLightChangeActions\">>:\n\n<<list-links filter:\"[tag[$:/tags/DarkLightChangeActions]]\" emptyMessage:\"none\">>\n\n<$button actions=<<createLightDarkwatch>> >Create <<lightDarkwatchTitle>> example tiddler</$button>\n\n```\ntitle: _/dynamic/light-dark/detection\ncaption: {{$:/language/ControlPanel/Palette/Config/Detection/Caption}}\ncode-body: yes\ntags: $:/tags/DarkLightChangeActions\n```\n\n<pre><code><$transclude $variable=\"dynamicLightDarkActionTemplate\" $mode=block $output=\"text/plain\" $type=\"text/plain\" /></code></pre>\n"},"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-status":{"title":"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-status","text":"Currently the following tiddlers are tagged ~$:/tags/DarkLightChangeActions:\n\n<<list-links filter:\"[tag[$:/tags/DarkLightChangeActions]]\" emptyMessage:\"none\">>\n\nCurrently the following tiddlers are tagged ~$:/tags/StartupAction/Browser:\n\n<<list-links filter:\"[tag[$:/tags/StartupAction/Browser]]\" emptyMessage:\"none\">>"},"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions":{"title":"$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions","tags":"Features","text":"!! Palette Modes Detection\n\n''Important:''\n\nBe aware that the browser setting can be independent from the OS setting.<br>\nIf the browser settings are set to \"System theme - auto\" for ~FireFox or \"System default\" for Chrome-like browsers, the OS setting will be shown.\n\n* Actions tagged <<tag $:/tags/StartupAction/Browser>> are executed when the wiki is started. More info can be found at StartupActions and examples here.\n* Actions tagged <<tag \"$:/tags/DarkLightChangeActions\">> are executed whenever the browser or OS dark / light setting is changed.\n\n!!! Variable\n\nThe following variable is defined for actions tagged: `$:/tags/DarkLightChangeActions`\n\n| Variables | Description |h\n|`dark-mode` |`yes` or `no` depending on the browser or OS setting |\n\n!!! Examples\n\nExamples, how to handle dark / light events can be found at: [[DarkLightChangeActions (Examples)|$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-examples]]\n\n{{$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-status}}\n"},"$:/plugins/wikilabs/palette-watch/docs/SystemTag: $:/tags/DarkLightChangeActions":{"title":"$:/plugins/wikilabs/palette-watch/docs/SystemTag: $:/tags/DarkLightChangeActions","caption":"$:/tags/DarkLightChangeActions","description":"marks actions executed on dark / light mode changes","tags":"SystemTags","text":"The [[system tag|SystemTags]] `$:/tags/DarkLightChangeActions` marks actions executed on dark / light mode changes. \n\n* [[DarkLightChangeActions]]\n* $:/info/darkmode\n"},"$:/plugins/wikilabs/palette-watch/history":{"title":"$:/plugins/wikilabs/palette-watch/history","text":"V 0.9.0 - 2025-08-25\n\n* Release as library pluguin \n* initial release\n"},"$:/plugins/wikilabs/palette-watch/icon":{"title":"$:/plugins/wikilabs/palette-watch/icon","text":"<svg width=\"22pt\" height=\"22pt\" viewBox=\"0 0 128 128\"><path transform=\"scale(4.36)\" d=\"M18.6 0 4.1 7.33.17 22.03l10.5 7.33 14.5-7.33 3.93-14.7L18.6 0zm3.96 5.53c.936.064 1.37 1.23.209 2.39l-6.77 6.77c-.962.765-2.36-1.08-1.69-1.69 1.76-1.62 5.08-5.08 6.77-6.77.529-.529 1.06-.727 1.48-.698zM13.83 9.7a14 14 0 0 1 2.43.209l-2.51 2.47s-1.7-.73-3.97 1.17c-1.58 1.32-2 4.13-3.63 6.45-1.18-1.07-1.88-2.41-1.88-3.85 0-3.57 4.28-6.46 9.57-6.46zm6.39 1.65c1.95 1.18 3.18 2.9 3.18 4.81 0 1.4.078 2.6-1.77 3.75-1.61.999-.572-.976-1.77-1.63-1.2-.652-2.98.196-2.72 1.18.478 1.82 2.9 1.71.944 2.49-1.96.778-2.72.669-4.25.669-1.17 0-2.29-.142-3.33-.401 1.47-.627 4.17-1.87 4.99-2.91 1.14-1.45 1.83-3.3 1.22-4.43-.029-.054 1.68-1.75 3.51-3.54zm-7.1 1.62c.047.212.096.441.158.672-3.87-.623-3.52 7.18-8.85 8.93h-.1c5-2.23 3.31-9.6 8.79-9.6zm.119 1.62c.152 0 .306.028.461.094.41.667 1.13 1.19 2.51 1.19 0 3.36-5.87 6.62-11.7 6.7 4.34-.987 6.42-7.97 8.71-7.98z\"/></svg>"},"$:/plugins/wikilabs/palette-watch/license":{"title":"$:/plugins/wikilabs/palette-watch/license","license-text":"https://opensource.org/license/BSD-3-clause/","text":"[[Palette Watch Plugin|https://wikilabs.github.io/#palette-watch]] (c) Mario Pietsch - 2023-2024\n\n[[The 3-Clause BSD License|https://opensource.org/license/BSD-3-clause/]]\n"},"$:/plugins/wikilabs/palette-watch/readme":{"title":"$:/plugins/wikilabs/palette-watch/readme","caption":"Palette Watch","tags":"$:/tags/ControlPanel/WikiLabs","text":"This plugin \"Palette Watch\" adds the ''ControlPanel -> Settings -> WikiLabs -> Palette Watch'' tab\n\n----\n\n{{$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions}}\n\n----\n\n{{$:/plugins/wikilabs/palette-watch/docs/DarkLightChangeActions-examples}}\n\n----\n\n!! Important\n\nThis plugin modifies the following core modules and / or templates\n\n<ul><$list filter=\"[[$:/plugins/wikilabs/palette-watch]plugintiddlers[]prefix[$:/core/]]\" emptyMessage=\"none\"><li><$link to=<<currentTiddler>>><<currentTiddler>><br></$link></li></$list></ul>\n"},"$:/ControlPanel/Settings/WikiLabs":{"title":"$:/ControlPanel/Settings/WikiLabs","caption":"WikiLabs","tags":"$:/tags/ControlPanel/SettingsTab","text":"Get an overview about all [[WikiLab Pugins|https://wikilabs.github.io]]\n\n<div class=\"tc-control-panel\">\n<$macrocall $name=\"tabs\" \n    tabsList=\"[all[shadows+tiddlers]tag[$:/tags/ControlPanel/WikiLabs]!has[draft.of]]\"\n    default=\"$:/plugins/wikilabs/palette-watch/readme\"\n    explicitState=\"$:/state/tab/settings/wikilabs\"\n/>\n</div>"},"$:/plugins/wikilabs/palette-watch/dark-light-change.js":{"title":"$:/plugins/wikilabs/palette-watch/dark-light-change.js","text":"/*\\\ntitle: $:/plugins/wikilabs/palette-watch/dark-light-change.js\ntype: application/javascript\nmodule-type: info\n\nCheck for OS of Browser dark / light \"(prefers-color-scheme: dark)\" info\n\n\\*/\n(function(){\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\nexports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {\n\tvar infoTiddlerFields = [];\n\tif($tw.browser) {\n \t\t// Dark mode through event listener on MediaQueryList\n\t\tvar mqList = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\t\tmqList.addEventListener(\"change\", function(event){\n\t\t\t// activate all actions tagged $:/tags/DarkLightChangeActions\n\t\t\t$tw.rootWidget.invokeActionsByTag(\"$:/tags/DarkLightChangeActions\",event,{\"dark-mode\":mqList.matches ? \"yes\" : \"no\"});\n\t\t});\n\t}\n\treturn infoTiddlerFields;\n};\n\n})();\n\n","type":"application/javascript","module-type":"info"}}}