Introduce new MediaQueryTrackerMechanism, and use it for dark mode #8555
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md) |
pmario
reviewed
Aug 27, 2024
| return tiddlers; | ||
| }; | ||
| infoTiddlerFields.push.apply(infoTiddlerFields,getResultTiddlers()); | ||
| mqList.addListener(function(event) { |
There was a problem hiding this comment.
IMO .addListener() was deprecated. See: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener. It should be mqList.addEventListener("change", function(event){ now
| @@ -0,0 +1,5 @@ | |||
| title: $:/core/wiki/config/MediaQueryTrackers/DarkLightSwitch | |||
There was a problem hiding this comment.
IMO the name should be DarkModePreferred instead of switch. The state itself does not switch anything. It only tells us about the browser or os preferred setting
| @@ -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") | | |||
There was a problem hiding this comment.
IMO it may be Is dark mode preferred
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces a new general purpose mechanism that allows any custom CSS media query to be bound to an info tiddler so that the current state of the query is reflected in the value of the tiddler. The value is updated dynamically.
The use of the info mechanism means that these tiddlers are dynamically created as shadow tiddlers within the
$:/temp/infoplugin, and so do not appear in tiddler lists.The mechanism is used to implement the existing dark mode tiddler with the following configuration:
Note the use of
info-tiddler-altto specify a redundant secondary info tiddler. This is used by the dark mode tracker to maintain compatibility while changing the info tiddler title for consistency.This PR was prompted by @pmario's work on dark mode switching in #7830 and is intended to allow us to implement actions for dark/light mode changes in a more extensible and generic way. The plan is to integrate this PR with the filtered actions work in #7999.