Themes
Customize the look and feel of Webcore
Source ↗️ Report Issue ↗️Webcore comes with different built-in themes, that can help you customize the look and feel of your website with a simple configuration. By default, Webcore uses a dark theme. To change the default theme, you can add the following option in your setup
mixin:
The theme
config can have the following values: dark
, light
, midnight
, and amber
. By default, it’s set to dark
. You can also include multiple themes if you want to allow your visitors to use your site with different configurations. For this, use the themes
config:
The themes
config must be a map, containing a list of themes you’d like to include, where the key references the theme’s name, and the value is an arbitrary CSS selector that you can attach to your body
to active the theme. In the above example, you can add the theme-light
class to your body
to activate the light
theme.
ThemeSwitcher
component to automatically set a theme on your site. Creating Themes
You can also create your own themes, by overriding CSS variables. Remove any theme
and themes
config options from your setup
mixin, and add the following CSS with your custom colors:
You can use the --w-color-scheme
to set the color-scheme
CSS property for elements, such as native input controls. Base colors range from primary
to primary-70
, each with a different shade of color:
When creating new themes, ensure you have proper color constrast between each shade. Apart from the base colors, you can also define four different theme colors that are often used for components: info
, success
, warning
, and alert
:
Each theme comes with an accent color that you can use for hover effects, as well as a foreground color (eg --w-color-info-fg
) that specifies the text color for the theme.
Request improvement for this page