Intergrate tiddlywiki palette colors and settings to custom CSS properties by Leilei332 · Pull Request #9333 · TiddlyWiki/TiddlyWiki5

Leilei332 · 2025-10-11T10:55:08Z

This PR adds a stylesheet to intergrate palette colors and theme settings to CSS custom properties

Compared to using wikitext syntax, using custom CSS properties has these benefits:

var() is more advanced, it supports fallback.
Theme creators can use vanilla CSS instead of mixing CSS and wikitext. This allows editors to highlight CSS properly and check errors.

TODO

Add palette color properties
Add tiddlywiki style settings properties
Update docs

netlify · 2025-10-11T10:55:16Z

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	`64d4f53`
🔍 Latest deploy log	https://app.netlify.com/projects/tiddlywiki-previews/deploys/697ed98f3c825a0008cb347f
😎 Deploy Preview	https://deploy-preview-9333--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2025-10-11T10:55:18Z

Confirmed: Leilei332 has already signed the Contributor License Agreement (see contributing.md)

pmario · 2025-11-08T12:16:21Z

Hi @Leilei332 ... I just saw your latest changes and I do have some thoughts.

TW prefixes are there to make the live for users easier. IMO --tp-color-alert-background is way much to type. Even for the core. I think --tp_ for tiddlywiki palette or parameter is a good prefix.

IMO --tcc-something would mean tw custom color, so we can get rid of the -color-

Other tc-, tv-, tm-,... prefixes are designed to be used by the core. The t stands for tiddlywiki They stand out, that users can use the unprefixed version of the same variable name. eg: TW would use .tc-myStyle for a class name. So users can use .myStyle in their apps, without naming clashes.

IMO the same principle should be used for custom CSS properties.

If something should be used by the core it is prefixed. This does not mean, that it is not allowed to be changed by the user. It is only an opinionated default name, that should "go out of the users way"

IMO if we have custom CSS properties that are that long as this PR suggests, it will be a horror to use them in more complex CSS formulas. I think eg: var(--tp-color-external-link-foreground-visited) is a monster and I would hate to use it for complex CSS calculations.

IMO it should be --tcc-external-link-foreground-visiged, to make it somewhat shorter and keep the same name. A global search for "external-link-foreground-visited" will find it.

I personally would prefer --tcc-external-link-FG-visited and --tcc-external-link-BG-visited because FG and BG stand out more and are easier to spot. But I think @Jermolene will not be happy with that one.

github-actions · 2025-11-15T08:15:18Z

📊 Build Size Comparison: `empty.html`

Branch	Size
Base (master)	2448.0 KB
PR	2449.8 KB

Diff: ⬆️ Increase: +1.8 KB

✅ Change Note Status

All change notes are properly formatted and validated!

📝 $:/changenotes/5.4.0/#9333

Type: feature | Category: developer
Release: 5.4.0

Intergrate Tiddlywiki palette colors and settings to custom CSS properties

🔗 #9333

👥 Contributors: Leilei332

📖 Change Note Guidelines

Change notes help track and communicate changes effectively. See the full documentation for details.

pmario · 2025-11-15T11:33:13Z

+change-category: developer
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9333
+github-contributors: Leilei332
+


hmm, Since there is a second documentation tiddler, which shows both variants, I think the release note can only show the new behaviour - Just a thought

pmario · 2025-11-15T11:51:23Z

+:root {
+	<$list filter="[[$:/palettes/Vanilla]indexes[]]">
+	--tpc-<<currentTiddler>>: <$transclude $variable="colour" $mode="inline" name=<<currentTiddler>>/>;
+	</$list>


I think the rendered output created with the following code looks a bit better, since it avoids the extra newlines.

:root { <$list filter="[[$:/palettes/Vanilla]indexes[]]"> --tpc-<<currentTiddler>>: <$transclude $variable="colour" $mode="inline" name=<<currentTiddler>>/>;</$list>

pmario · 2025-11-15T11:56:09Z

+```css
+/* New way to get a palette color without wikitext */
+.tag {
+	background: var(--tp-color-tag-background);


IMO there is a typo --tpc. It should be --tpc-tag-background

pmario · 2025-11-15T12:03:48Z

+}
+```
+
+See [[Writing stylesheets in vanilla CSS]] and [[Core CSS Variables]] for details.


Suggested change

See [[Writing stylesheets in vanilla CSS]] and [[Core CSS Variables]] for details.

See:

* [[Writing stylesheets in vanilla CSS]] and [[Core CSS Variables]] for details.

* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var

The previous example actually doesn't work at all

pmario · 2026-01-30T10:51:31Z

+title: Core CSS Variables
+type: text/vnd.tiddlywiki
+
+<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*` and `--tpc-*`. They are mainly used to [[Write stylesheets in vanilla CSS|Writing stylesheets in vanilla CSS]]. These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.


Suggested change

<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*` and `--tpc-*`. They are mainly used to [[Write stylesheets in vanilla CSS|Writing stylesheets in vanilla CSS]]. These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.

<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*` and `--tpc-*`. They are mainly used to [[Write stylesheets in vanilla CSS|Writing stylesheets in vanilla CSS]].

* These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables.

* It is also ''not recommended'' to override these core CSS variables.

There also should be some information what --tp and --tpc means. This info even can be duplicated in several places if needed.

pmario · 2026-01-30T10:54:54Z

+<<.from-version 5.4.0>> Before v5.4.0, theme developers have to mix wikitext syntax with CSS syntax when writing stylesheets to intergrate Tiddlywiki color palettes and theme settings. With the introduction of [[Core CSS Variables]] in v5.4.0, theme developers can intergrate most Tiddlywiki palettes with vanilla CSS.
+
+! Getting Tiddlywiki palette colors
+Tiddlywiki's custom properties for colors are prefixed `--tpc-`. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:


Suggested change

Tiddlywiki's custom properties for colors are prefixed `--tpc-`. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:

Tiddlywiki's custom properties for colors are prefixed `--tpc-` (tpc = ''t''w ''p''alette ''c''olour). Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:

pmario · 2026-01-30T10:59:03Z

+
+<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*` and `--tpc-*`. They are mainly used to [[Write stylesheets in vanilla CSS|Writing stylesheets in vanilla CSS]]. These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.
+
+Core CSS variables are defined in [[$:/core/stylesheets/custom-properties]].


The tiddler $:/core/stylesheets/custom-properties is not human readable.

Is it possible to use code-body: yes and still use the tiddler properly?

If not IMO linking to it does not really make sense, so the link may be removed.

pmario · 2026-02-01T07:30:10Z

+}
+```
+
+While using CSS variables in media quert definitions doesn't work at all:


IMO typo: media query instead of quert

Jermolene · 2026-02-04T11:37:09Z

Thanks @Leilei332

pmario · 2026-02-04T11:41:30Z

@Leilei332 ... Even if this PR is merged, please have a look at my latest comments. There is a typo in the docs. ... And there seems to be a title-clash. Please check that

Expose tiddlywiki palette colors and settings to custom CSS properties

1e86e13

Leilei332 marked this pull request as draft October 11, 2025 11:12

Leilei332 added 2 commits October 12, 2025 12:01

Rename & use --tc prefix

6592c07

Add colors and CSS settings

48c9f03

pmario reviewed Oct 12, 2025

View reviewed changes

Comment thread core/stylesheets/custom-properties.tid Outdated

pmario reviewed Oct 12, 2025

View reviewed changes

Comment thread core/stylesheets/custom-properties.tid Outdated

Leilei332 added 3 commits October 12, 2025 18:17

Make CSS settings properties' name readable

73bb30c

Add all CSS settings

0dd151f

Add all palette colors

9a628a4

pmario reviewed Oct 17, 2025

View reviewed changes

Comment thread core/stylesheets/custom-properties.tid Outdated

Leilei332 added 4 commits October 17, 2025 18:31

Remove macrocallblock rule

5b41130

Indent with tabs

e687c1f

Use --tc-color prefix

d330b71

Update docs

714bde3

pmario reviewed Nov 8, 2025

View reviewed changes

Comment thread editions/tw5.com/tiddlers/Core CSS Variables.tid Outdated

Leilei332 added 5 commits November 9, 2025 20:15

Use --tpc prefix

dbc3f22

Merge branch 'master' into tiddlywiki-css-property

e40d2da

Add change note

bd11cf5

Simplify palette color rules with list widget

bf883c1

Update docs

c0ada2e

pmario reviewed Nov 15, 2025

View reviewed changes

TiddlyWiki deleted a comment from github-actions Bot Nov 15, 2025

pmario reviewed Nov 15, 2025

View reviewed changes

Merge branch 'master' into tiddlywiki-css-property

15b0b6a

Leilei332 added 9 commits January 22, 2026 18:34

Merge branch 'master' into tiddlywiki-css-property

4a8776b

Hardcode custom properties

0049161

Update docs

72aab6b

Remove cascades

5809fb1

Update docs

f8d459d

Add more docs

57c37da

Update docs

9c1810e

Update docs

87ec30d

Add --tp-animation-duration

7cf7b95

Leilei332 marked this pull request as ready for review January 30, 2026 08:31

Update change note

08bf743

The previous example actually doesn't work at all

pmario reviewed Jan 30, 2026

View reviewed changes

Leilei332 mentioned this pull request Feb 1, 2026

Planning v5.4.0 #9065

Open

Update docs about limits of CSS variables

64d4f53

pmario reviewed Feb 1, 2026

View reviewed changes

saqimtiaz added this to Planning for v5.4.0 Feb 4, 2026

saqimtiaz moved this to Ready in Planning for v5.4.0 Feb 4, 2026

Jermolene merged commit b236373 into TiddlyWiki:master Feb 4, 2026
11 checks passed

github-project-automation Bot moved this from Ready to Done in Planning for v5.4.0 Feb 4, 2026

pmario mentioned this pull request Sep 14, 2026

Add the hard-line-breaks plugin #10026

Open

-See [[Writing stylesheets in vanilla CSS]] and [[Core CSS Variables]] for details.
+See:
+* [[Writing stylesheets in vanilla CSS]] and [[Core CSS Variables]] for details.
+* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var

	Tiddlywiki's custom properties for colors are prefixed `--tpc-`. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:
	Tiddlywiki's custom properties for colors are prefixed `--tpc-` (tpc = ''t''w ''p''alette ''c''olour). Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:


		<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-` and `--tpc-`. They are mainly used to [[Write stylesheets in vanilla CSS\|Writing stylesheets in vanilla CSS]]. These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.

		Core CSS variables are defined in [[$:/core/stylesheets/custom-properties]].

Conversation

Leilei332 commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

netlify Bot commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tiddlywiki-previews ready!

Uh oh!

github-actions Bot commented Oct 11, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pmario commented Nov 8, 2025

Uh oh!

github-actions Bot commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Build Size Comparison: empty.html

✅ Change Note Status

📝 $:/changenotes/5.4.0/#9333

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Jermolene commented Feb 4, 2026

Uh oh!

pmario commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Leilei332 commented Oct 11, 2025 •

edited

Loading

netlify Bot commented Oct 11, 2025 •

edited

Loading

github-actions Bot commented Nov 15, 2025 •

edited

Loading

📊 Build Size Comparison: `empty.html`