Automatic light/dark palette switching through matchMedia Listener and toggle Button

[BurningTreeC]

This is a draft PR that should fix #5023

It sets $:/state/dark-mode to true or false at startup and adds an event listener for when the media-query for prefers-color-scheme: dark changes.

It requires $:/config/AutoDarkMode to be set to yes so that the page switches to whatever palette is stored in $:/config/Palette/DarkMode when the OS' dark-mode setting changes

It also adds a toggle button that toggles between the palette in $:/palette and the one in $:/config/Palette/DarkMode

There's no UI yet, but I'm working on that

[BurningTreeC]

Here's a DEMO:

matchMediaDemo.zip

[BurningTreeC]

Here's the same DEMO but the framed engine does no more extract the background-colors from the $:/palette... background-colors for the iframe and the domNode are set by the vanilla/base stylesheet:

matchMediaDemo_2.zip

[kookma]

Hi @BurningTreeC
Many thanks for all your efforts. Both work fine.

Both manual and automatic switch dark/light works. For UI I may suggest

1. two slots to set preferred dark/light palettes
2. two slots to set start/stop time for day or night for automatic switch.

I will suggest to use better icons for day/night for page controls.

Tested: Windows 10, Edge 86, Chrome 86, FF 82.

[BurningTreeC]

Hi @kookma and thanks for testing!

Currently the palette chosen for $:/palette is used as the light palette and the one chosen for $:/config/Palette/DarkMode is the dark palette. Therefor only one additional UI chooser is needed, which is the one for the dark palette...

If someone provides me two better icons for dark/light I will add them. I'm not an icon-designer at all...

The idea for automatic day/night switch has come up in the google groups, I've seen that... But I don't know how to implement that correctly in this scenario. Maybe I get an idea

[kookma]

If someone provides me two better icons for dark/light I will add them. I'm not an icon-designer at all...

Is it possible to use free open source icons for example from: https://icones.js.org/
great sun/moon (day/night) icons can be find here https://erikflowers.github.io/weather-icons/

But I am not sure if the policy of TW allow to use such icons.

The idea for automatic day/night switch has come up in the google groups, I've seen that... But I don't know how to implement that correctly in this scenario. Maybe I get an idea

I am not sure if the bimlas code for automatic calculating day/night time is useful here or not. Please have a look at
https://groups.google.com/g/tiddlywiki/c/-I6brIviJJs/m/zFwiP8wHBAAJ

[kookma]

I also announced this PR in the Google group in hope of other people come for testing or helping (Sorry if I did not informed you in advance to do so)

[BurningTreeC]

An updated DEMO with a very rudimentary UI in ControlPanel -> palette:

matchMediaDemo_3.zip

[kookma]

@BurningTreeC
Would you please use the below attached icons. I can edit them in Inkscape if they have any problem.

sun-moon.zip

[BurningTreeC]

@kookma , the same DEMO with your icons:

matchMediaDemo_4.zip

[kookma]

@ The UI is at the bottom of palettes page and a little difficult to find! What do you think if a dedicated tab is used for setting dark mode! But lets wait to see what other says!

The icons are good thank you! but it seems they are a little smaller and their lines are thinner than other core icon ! I will work to see if I can improve them.

[Jermolene]

The icons are good thank you! but it seems they are a little smaller and their lines are thinner than other core icon ! I will work to see if I can improve them.

It is indeed important that the weights of the core icons match consistently. I'll try to work up a couple of icons we can use.

[BurningTreeC]

It is indeed important that the weights of the core icons match consistently. I'll try to work up a couple of icons we can use.

That's great. Thank you @Jermolene!

[pmario]

For me demo_4 switches back to light mode, whenever I reload the tab

to reproduce:

• OS is light mode and will never change
• Open demo
• it's light mode
• click light / dark icon
• save
• reload the page
• it switches to light mode

[BurningTreeC]

@pmario - Demo 4 sets Light Mode on startup if $:/config/AutoDarkMode is set to yes. Maybe the name is a bit misleading

[kookma]

when $:/config/AutoDarkMode is set to yes, should the light/dark toggle button then be disabled?

Having the button gives this flexibility to switch dark/light whenever you like! I personably think have it enabled!
My two cents!

[Jermolene]

Hi @kookma @BurningTreeC I was envisaging a set of three icons that would function as radio buttons:

• Manually engage dark mode
• Manually engage light mode
• Automatically switch between dark/light according to the browser

Does that align with your implementation?

[BurningTreeC]

Hi @Jermolene, the light /dark button is currently just a toggle button between light and dark palettes and is disabled when AutoDarkMode is yes. But we can make it three - state which seems to be a better idea

[Jermolene]

Hi @BurningTreeC were you thinking of a single button that cycles through the three states? That might be confusing.

An alternative would be to show a single icon in the side bar that would be either the dark or light icon to indicate the current status. Clicking the icon would bring up a dropdown menu with three items dark/light/auto, each accompanied by the appropriate icon, and a tick applied to the current setting.

We might also provide the three individual icons as optional page control buttons/menu bar items, so that people who want single click access to one of the modes can enable those buttons.

[BurningTreeC]

were you thinking of a single button that cycles through the three states? That might be confusing.

yes I was thinking about that, but you may be right that it's a bit confusing

An alternative would be to show a single icon in the side bar that would be either the dark or light icon to indicate the current status. Clicking the icon would bring up a dropdown menu with three items dark/light/auto, each accompanied by the appropriate icon, and a tick applied to the current setting.

That sounds like a much better idea

We might also provide the three individual icons as optional page control buttons/menu bar items, so that people who want single click access to one of the modes can enable those buttons.

Ok, yes that sounds appropriate

[kookma]

Hi @Jermolene
I absolutely support optional page control button to toggle dark/light whenever user like! So I am with your last suggestion which @BurningTreeC also agreed!

[Jermolene]

Hi @BurningTreeC thank you for all your work on this. I think it will be a popular feature, and it's worth our attention.

However, I now have some concerns about the our approach. The idea of having a separate palette setting for dark vs. light mode seems reasonable, but it does have a few consequences that are becoming clearer:

• It's kind of annoying that every reference to $:/palette now needs to check for dark mode first. It's also not entirely backwards compatible: any plugin or custom layout that overrides $:/palette will not work as expected if auto dark/light mode is engaged, and $:/paletteDark is being used instead
• The semantics of switching palettes could be confusing: does switching palette mean switching the palette used for either dark mode or light mode, or does it mean engaging a new palette that automatically switches between light and dark mode
• CodeMirror and Highlight.js: Add ability to define colors through Palette #5123 proposes extending the core palette entry identifiers to include app-specific entries, which makes every palette significantly more complex and unwieldy.

So, I'm tentatively thinking that we should maybe move to a mode where palettes themselves have to be upgraded to support dark vs. light mode. We might have a prefix (like ~, so it sorts after letters) for dark mode entries that overrides any light mode entry. Then the colour macro switches the prefix on or off according to the current light vs. dark mode setting.

We'd just have $:/palette to identify the current palette and $:/dark "yes"/"no" for switching to the dark mode variant within that palette.

Given an ecosystem of skilfully made palettes, that might all works quite well, but in the meantime we might need to help the transition with eg. tools to merge two palettes, making one the dark palette and one the light palette.

[Jermolene]

Another thought: it would be useful to be able to make icons that changed appearance according to dark mode vs. light mode. The easiest way to do that would be to include classes tc-light-mode-only and tc-dark-mode-only that could be applied to elements of the SVG to control which parts are displayed for different palettes. The foreground/background colours of the SVG would still be set via SVG in the usual way.

That implies that we would have a tc-dark-mode class on the body element so that we could make the necessary CSS declarations.

[saqimtiaz]

@Jermolene @BurningTreeC I would suggest that we not rush to get this into 5.1.23 so that we can give it proper consideration.

[BurningTreeC]

@Jermolene, thanks for your detailed answer on this :)

As @saqimtiaz suggests, we should postpone this to after 5.1.23 so that we have time to rethink the approach

[BurningTreeC]

5.1.23 already is a huge release

[Jermolene]

I think that's sensible. Having got the $:/info tiddler in means that others will be able to experiment in the meantime.

[Jermolene]

Hi @BurningTreeC just to add that I came across the color-scheme: dark; property which causes browsers to render dark mode versions of system controls. Seems to be a much better approach than manually changing button backgrounds etc. See https://web.dev/color-scheme/