Themes

Customize the look and feel of Webcore

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:

@use 'webcoreui/styles' as *;
@include setup((
    ...
    theme: 'light'
));

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:

@use 'webcoreui/styles' as *;
@include setup((
    ...
    themes: (
        dark: '.theme-dark',
        light: '.theme-light',
        midnight: '.theme-blue',
        amber: '.theme-yellow'
    )
));

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.

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:

:root {
    --w-color-scheme: dark;
    --w-color-primary: #FFF;        // Primary text
    --w-color-primary-10: #DDD;     // Secondary text
    --w-color-primary-20: #BBB;     // Muted text
    --w-color-primary-30: #757575;  // Placeholders & disabled states
    --w-color-primary-40: #333;     // Hover states
    --w-color-primary-50: #252525;  // Borders
    --w-color-primary-60: #111;     // Scrollbars & stripes
    --w-color-primary-70: #000;     // Background

    --w-color-info: #0ABDE3;
    --w-color-info-accent: #48DBFB;
    --w-color-info-fg: #000;
    --w-color-success: #10AC84;
    --w-color-success-accent: #1DD1A1;
    --w-color-success-fg: #000;
    --w-color-warning: #FF9F43;
    --w-color-warning-accent: #f7AA61;
    --w-color-warning-fg: #000;
    --w-color-alert: #de3233;
    --w-color-alert-accent: #EE5253;
    --w-color-alert-fg: #FFF;
    --w-color-overlay: #0000009e;
}

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.