feat(chroma): use cascade layer to allow override via custom.css

This allows users to customize Chroma CSS without building the TailwindCSS manually.

For example, add this to `custom.css`:

```
.chroma,
.chroma,
.chroma:is(.dark *),
.chroma:is(.dark *) * {
  color: unset;
  background-color: unset;
  font-weight: unset;
}
```

Then use:

```
hugo gen chromastyles --style=github | sed 's/\./html.dark ./' >> assets/css/custom.css

hugo gen chromastyles --style=github | sed 's/\./html:not(.dark) ./' >> exampleSite/assets/css/custom.css
```
This commit is contained in:
ZhenShuo Leo
2025-10-18 20:06:24 +08:00
parent c9595934ea
commit 32f452b25d
2 changed files with 247 additions and 245 deletions

View File

@@ -1,11 +1,11 @@
/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
@import "./components/zen-mode.css";
@import "./components/chroma.css";
@import "./components/a11y.css";
@config "../../tailwind.config.js";
@import "tailwindcss";
@config "../../tailwind.config.js";
@import "./components/chroma.css" layer(utilities);
@import "./components/zen-mode.css";
@import "./components/a11y.css";
body a,
body button {