- Assume you have developed a simple macro to create a box with some background color.
- How to write your CSS to handle both dark and light palettes?
— My solution for colored box macro is as below
-
create a stylesheet for the colored box macro (this is a dynamic one, the tiddler type is text/vnd.tiddlywiki or empty BUT not txt/css)
-
add background color for dark theme
-
add background color for light theme
-
A palette has a field called
color-scheme, you can check to see a light or dark palette is in use -
In the macro check to see what type of palette is in use and based on that apply the box background color
Example
-
Download Example Dark_Light.json (539 Bytes)
-
Drag and drop it into https://tiddlywiki.com
-
Open Example Dark/Light
-
Now switch between Vanilla palette and Cupertino Dark or another dark palette.
Light Mode: Vanilla palette
Dark mode: Cupertino Dark
Question
What is the best practice to have user developed styles for UI which works both in dark and light mode in TiddlyWiki?
