While using our theme, you may encounter a dilemma when applying custom static colors – whether you’re creating new sections, modifying existing ones, or customizing your site in general. The issue is that static colors will not adapt when switching between light and dark color schemes. This might seem obvious, but we want to clarify it in case you run into this situation.
The reason is simple: all colors used for titles, text, backgrounds, and other elements are defined using CSS variables, which you can adjust directly via Customizer → Theme Options → Color Scheme. Each CSS variable (except for those shared between both schemes, like the primary color or border color) has a dedicated version for both light and dark modes, allowing your site to switch styles seamlessly.
When using a static color, however, there is no alternative version for dark or light mode – so it always appears the same regardless of the active color scheme.
So, how can you handle this? There are two possible approaches:
- Use the theme’s built-in colors and customize them via the Customizer, without adding any additional static values. If you want to reference them in custom CSS, you’ll find a list of adaptive CSS variables below:
--jkd-bg-col: #fff;
--jkd-dark-col: #131f33;
--jkd-h-col: #131f33;
--jkd-inv-col: #fff;
--jkd-txt-col: #414857;- If you still want to use a custom color, define it as a CSS variable with both light and dark versions like this (in Custom CSS):
:root, [data-cs=light], .light-cs {
--custom-color: #000;
}
[data-cs=dark], .dark-cs {
--custom-color: #fff;
}