This commit is contained in:
madrilene 2025-01-12 12:33:49 +01:00
parent a8a32f1538
commit 6774e1278f

View file

@ -62,13 +62,13 @@ Run `npm run colors` after defining your base color values in `src/_data/designT
}
```
`src/assets/css/global/base/variables.css` changed a lot, as I now use new color names. I also dropped the `@supports` blocks for `color-mix()` and the relative color syntax - not because they aren't great, but I just perceived the whole file as too complex. Now JavaScript does the step of creating subdued colors for the dark theme.
`src/assets/css/global/base/variables.css` changed a lot, as I now use new color names. I also dropped the `@supports` blocks for `color-mix()` and the relative color syntax -- not because they aren't great, but I just perceived the whole file as too complex. Now JavaScript does the step of creating subdued colors for the dark theme.
I also considered using the new `light-dark()` CSS function instead of the repetitive code for `prefers-color-scheme` and `data-theme=“dark”`, but the browser support is still too low.
**Breaking:**: `src/assets/css/global/base/variables.css` changed. You must adapt your colors in `src/_data/designTokens/colorsBase.json` if you want to use the `npm run colors` script.
You can also just completely skip that and just define your colors directly in `colors.json` (I recommend deleting the colors command in `package.json` in this case, so you don't unitentionally overwrite your work).
You can also just completely skip that and define your colors directly in `colors.json` (I recommend deleting the `colors` command in `package.json` in this case, so you don't unitentionally overwrite your work).
[More about colors here](/get-started/#design-tokens).