Custom color palette?

[IngwiePhoenix]

Hello!

I am visually impaired; UIs are by far not my strength - but, I would like to play with the colors and have my friends help me finding a nice color theme to lean into the Synthwave kind of color palette.

So far, I have experimented with Daisy and Tailwind - but both are impressively overkill for what I would like to do, and since my main stack is Go, Templ and HTMX (and Bun as a dev-tool since it's much faster to drop into a DevContainer or build pipeline, imo) I don't have real/full access to everything; there are still edge cases where Bun falls on it's face.

Daisy and Tailwind use PostCSS, which is also great for removing unused CSS classes, which may come in handy, but also happens to be somewhat of it's own post-processor. So I wanted to ask:

• How exactly can I change Matcha's colors? Do I just modify styles/@root/mod.css or is there something else I should tweak instead?
• What is the exact order in which to load the styles/*/mod.css files? I noticed that each part of MatchaCSS is separated in there, and CSS is sensitive to ordering. So I just wanted to know what'd be the best way to do it. :)

Thank you very much and kind regards,

Ingwie

[lowlighter]

Hi sorry for the delay in response

Not sure if you still ended up with matcha or chosen another default theme, but indeed, every css variables (including the color palette) is contained within the styles/@root/mod.css

As for the second question, apart from the @root which is supposed to be at top, you may include all the other files in the order you wish.

The function used to build the distribution files looks like this:

matcha/app/build/css.ts

Line 31 in b2f1fb0

let files = await Array.fromAsync(expandGlob("styles/**/*.css", { root, exclude: exclude.map((directory) => `styles/${directory}/*.css`) }))

Basically it appends everything in this order @root > @* > *.
The files are just separated to make maintaining easier, but they're intended to be included all at once :)