Dark and Light Theme: Best Practice in TiddlyWiki

#1

Discussions are ongoing about supporting color schemes on GitHub, but they require time. Meanwhile, I would appreciate a solution for the following cases in the interim.

I’m working with CSS frameworks such as open-props, Bootstrap (used in Shiraz), Bulma, and FeatherCSS, among others.

TiddlyWiki utilizes color palettes to switch between dark and light themes. I would like to implement a global dark or light mode based on the selected palette.

For instance, in Bootstrap 5.3.3, to enable global dark mode, it’s common to add the data-bs-theme="dark" attribute to the <html> element of the HTML page. This action applies the dark mode theme globally to all Bootstrap components on the page, unless overridden by a specific data-bs-theme attribute.

My question is: Is there a WikiText/CSS/Html method to automatically apply a global dark mode when selecting a dark palette in TiddlyWiki, or a global light mode when opting for a light palette?

#2

I am not certain what applying a global dark mode would entail, however you can add a class to the page template when a dark mode palette is selected, see https://tiddlywiki.com/#SystemTag%3A%20%24%3A%2Ftags%2FClassFilters%2FPageTemplate

Something along these lines perhaps [{$:/palette}is.dark[]then[darkmode]]

#3

Much appreciated Saq!
This does not allow me to add data-bs-theme="dark" attribute to the page template, but easily add my class to page template.
So I can use my CSS as:

.dark ... {}
.light > ... {}

Thank you!

#4

you might want to use this: CSS color-scheme-dependent colors with light-dark() | Articles | web.dev

you could toggle the darkmode with wikitext, with saq example:

:root {  
  color-scheme: {{{ 
    [{$:/palette}is.dark[]then[dark]]
    [{$:/palette}is.light[]then[light]]
    :else[[light dark]]
  }}};
}
2 Likes
#5

Thank you @telumire.

I just did not get the is.dark and is.light

#6

Those are placeholders for functions that can check if the palette is for dark mode or light. I assume you plan to somehow designate a palette as belonging to dark mode or light mode.

1 Like
#7

FWIW, I use a chrome browser addon called “Dark Reader”. When activated I note, via inspector tool, that it has injected things like these:

image
image1354×171 22.7 KB

I’m pretty sure I’ve seen in in sub elements also.

#8

Ah, thank you Saq.
Well yes. in some of the plugins I use colorful elements and I have to know the palette is dark or light!