Tiddlywiki5: [IDEA] A Toggle Button for Simple Switching Dark/Light Theme for Tiddlywiki 5.1.23

[kookma]

Tiddlywiki 5.1.23 has a bunch of wonderful new features. With the advent of toggle operator and the nice working dark palettes, yet the current trend for having toggle dark/light on many websites, I may recommend

1. Have a toggle button on the page control or top menu bar
2. Use nice buttons like https://icones.js.org/collection/uil (see the nice light/dark button top right of screen)
3. Toggle between Vanilla / Gruvbox dark or Neon from JD

[saqimtiaz]

@BurningTreeC Is this something you might want to tackle? Even if it doesn't make it into the core right away, I think it would be a nice plugin.

JD has already done most of the groundwork in #4769

[BurningTreeC]

@saqimtiaz we'd need a dark / light equivalent for every theme... I don't know if we do. But I'd like to tackle this, yes

[saqimtiaz]

@BurningTreeC I was thinking we just let the user directly choose a dark and light palette as part of a config option.

[BurningTreeC]

Good idea @saqimtiaz !

[saqimtiaz]

@BurningTreeC do have a look at JD's implementation in #4769, some good ideas in there

[Jermolene]

Just to complicate things, there is a media query for detecting the users preference for dark mode vs. light mode:

https://css-tricks.com/dark-modes-with-css/

$:/core/modules/info/platform.js could use Window.matchMedia() to set an info tiddler.

[BurningTreeC]

$:/core/modules/info/platform.js could use Window.matchMedia() to set an info tiddler.

@Jermolene, that's a nice idea. I already did so, but now I need some ideas how to make use of it

[Jermolene]

@Jermolene, that's a nice idea. I already did so, but now I need some ideas how to make use of it

I get the impression that people like websites that automatically adapt to the prevailing display mode, so I think that would be a good starting point. We should also listen for changes using the technique shown in https://flaviocopes.com/javascript-detect-dark-mode/

Having said that, we may want to keep this back until after v5.1.23...

[BurningTreeC]

yes @Jermolene, I also want to keep this back until after v5.1.23

[saqimtiaz]

I think it would be good to give this a run as a plugin, or an early part of 5.1.24-prelease to get user feedback.

[BurningTreeC]

@Jermolene - I tried using window.matchMedia and listening for changes on the preferred color scheme and I got it working. I currently do this in startup.js, set a state tiddler (like $:/state/dark-mode) to true or false on startup and change it when the preferred color scheme changes.

In the colour macro then we can do <$transclude tiddler={{{ [{$:/state/dark-mode}match[true]then{$:/config/DarkMode/palette}] ~[{$:/config/LightMode/palette}] ~[{$:/palette}] }}} index="$name$"> and users can configure their dark/light palettes through the ControlPanel

[pmario]

I think switching between themes is already a button, that can be used that way. Do we really need complex CSS?

[Jermolene]

I think switching between themes is already a button, that can be used that way. Do we really need complex CSS?

The rationale for a modal switcher is that it is outside the main page container in the DOM, and hence can't be disrupted by a faulty page layout.

[joshuafontany]

I love that there are system/media-query hooks to use. I implemented this as a simple light/dark toigle sidebar button in my silat (martial arts) wiki: https://silat.chronicles.wiki

(Part of my PageTools plugin that I have to rework now that we have toggle[] and cycle[]. I also got a couple of good svgs to use there.)

[BurningTreeC]

@Jermolene , I don't want to create a new issue for this question: why does the framed editor extract the background-color from the currently used palette and set it for the iframeNode and domNode, if we can style them through a Stylesheet, which makes it also easier to modify styles... ?

[Jermolene]

Hi @BurningTreeC the issue is that we can't style the contents of the iframe from the main stylesheet, so we style an off-screen text area and then copy the styles one by one.

[BurningTreeC]

Hi @Jermolene, thanks for the explanation, but I was fiddling around by commenting out the lines that set the background-color to the iframeNode and the domNode and still it works fine styling them via a Stylesheet

[Jermolene]

Hi @BurningTreeC I think you might have authored the lines in question: 14003b0e88fa8378af71f499700c648fe2a3f3d7

[BurningTreeC]

Hi @BurningTreeC I think you might have authored the lines in question: 14003b0

Ouch, that was a mistake!

[BurningTreeC]

Hi @BurningTreeC I think you might have authored the lines in question: 14003b0

@Jermolene, I'll revert this with this PR here

[Jermolene]

@Jermolene, I'll revert this with this PR here

Thanks @BurningTreeC

[AnthonyMuscio]

Folks,

Beyone simple nioght day switching - I support that.

Using this filter invert gives me the clue I was looking for, a way to get Icons to be given contrasting colors. Without even knowing the color one can use its rotated hue.

_ Somehow I feel this feature could be built into svg display or designs to allow a primary colour to be selected freely knowing its background as an example will contrast.
_ My interest is to allow designers to use alternate colors on available icons when adding a new button feature, but we always have the issue of "other themes", changes in background color etc...
_ This may also apply to svgs from the icon source Mohammad shared recently

All I ask is when investigating the mechaisium for night/day please also consider it as a way to ensure complementary colors and please avoid compromising future possibilities.

Thanks
Tony

[AnthonyMuscio]

Post script, eg using traffic light colors to indicate button status etc...