Theming

Xyba Elements is designed to be fully customizable through CSS. The elements base their colors on the currentColor which is inherited from from the document.

To change the default styles from dark to light, is as simple as setting the css property color on the body element.

body {
    color: white;
}

Custom Properties

The Xyba Elements default styles can be customized at a very high-level using custom properties. Elements that provides a default visual style also implements element specific custom properties as well.

You can set custom properties on the whole document.

:root {
    --xyba-color: blue;
}

You can set custom properties on a selector in your stylesheet.

xyba-button.my-button {
    --xyba-text-color-active: red;
}

Alternatively you can inline the custom properties

<xyba-button style="--xyba-text-color-active: red;">A</xyba-button>

High-level Properties

name	description
--xyba-color	The base color used for inheriting. Set this to eg. green to have everything be green.
--xyba-backdrop-filter	The backdrop filter for elements. Eg. set this to 0 to disable blur on the elements.
--xyba-background	The background
--xyba-background-active	The background when elements are active
--xyba-border-width	The border width
--xyba-border-style	The style, eg. solid or dashed
--xyba-border-color	The color of the borders
--xyba-border-color-active	The color of the borders when elements are active or pressed
--xyba-text-color	The color for text or icons
--xyba-text-color-active	The color for text or icons when elements are active or pressed

See Analog or Button documentation for for element specific custom properties.

CSS Parts

Xyba Elements utilizes Shadow DOM to ensure that the structures of the elements are left intact in any environment. As a result, you can’t simply target their internals with the usual CSS selectors.

Instead elements expose parts that can safely be target with the CSS part selector ::part styled without concerns for the general structure.

Here's an example that modifies the Analog element using the ::part(base) selector.

html

<xyba-analog class="base-modification"></xyba-analog>

css

.base-modification::part(base) {
    border-style: dashed;
    border-width: 4px;
}

All visual elements expose parts. You can find them in each component’s API documentation under the “CSS Parts” section.

The no-style attribute

All visual elements implements the no-style attribute / noStyle property that completely disables all predefined visual aspects. This is very useful in combination with using slots as it provides full styling accessibility to your disposal without the need for overriding default styles.

This also means that any theming done with custom properties will be ignored, unless implemented again manually.

Here's an example of a highly custom button.

Start

html

<xyba-button class="custom-button" no-style><span>Start</span></xyba-button>

css

.custom-button {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    background-color: color-mix(in srgb, currentColor 10%, transparent);

    &:hover {
        background-color: color-mix(in srgb, currentColor 20%, transparent);
    }

    &:active {
        background-color: currentColor;
        & > span {
            filter: invert(1);
        }
    }
}