Theming

Xyba Elements is designed to be fully customizable through CSS. There are three levels of customization, from simple theming to full visual control.

1. Color theming

All elements derive their colors from a single CSS custom property: --xyba-color. By default it inherits from currentColor, so changing the document's color property is the simplest way to theme everything.

body {
    color: white;
}

For more control, set --xyba-color directly. Backgrounds, borders, and text colors are all computed from this value using color-mix.

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

You can also set it on individual elements.

xyba-button.fire {
    --xyba-color: red;
}

Or inline it.

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

2. CSS Parts

For granular control over specific visual aspects, use the ::part selector to style Shadow DOM internals directly with standard CSS.

Available parts

Element	Parts
xyba-button	base, content
xyba-analog	base, knob, overlay

Styling parts

xyba-button::part(base) {
    background: rgba(255, 0, 0, 0.2);
    border: 3px solid red;
    backdrop-filter: blur(20px);
}

xyba-button::part(content) {
    color: white;
    font-size: 1.2em;
}

Styling active states

The pressed (button) and active (analog) attributes are reflected on the host element, so you can combine them with ::part for state-specific styling.

xyba-button[pressed]::part(base) {
    background: rgba(255, 0, 0, 0.5);
    border-color: darkred;
}

xyba-analog[active]::part(knob) {
    background: currentColor;
    transform: scale(1.1);
}

Analog example

html

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

css

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

3. The no-style attribute

All visual elements implement the no-style attribute / noStyle property that completely disables all predefined visual styles. This gives you full control, especially when combined with slots for custom base, knob, or overlay elements.

This also means that any theming done with --xyba-color or ::part 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);
        }
    }
}