FrankenstyleKit uses a simple background and foreground convention for colors. Take a look at the following CSS variables:
The background color of the following component will be oklch(27.4% 0.006 286.033) and the foreground color will be oklch(98.5% 0 0).
Here’s the list of variables available for customization:
To add new colors, simply add them to your main CSS file.
You can now use it via utility class in your components.
1. Start by picking your desired color and use that to assign values to the --uk-primary, --uk-primary-f, and --uk-focus tokens. These tokens represent your main theme color, its contrasting foreground color, and the focus color.
2. Use the CSS snippet below as your starting point and replace the * with your theme name (e.g. indigo, cyan, fuchsia, etc.). You only need to update the values for --uk-primary, --uk-primary-f, and --uk-focus for both light and dark modes, but you’re free to customize everything else if needed.
To set your newly added palette as the default, simply update the script in your <head> tag to reference the new theme name, like so:
To register your newly added palette with the LSH component, please refer to the corresponding documentation or guide for step-by-step instructions on how to integrate it.