Theme Building

Every Isabyte component reads its colors, spacing, border radii and other visual properties from a shared set of design tokens exposed as CSS custom properties (--isa-*). Changing a token changes every component that uses it at once — you never override individual component styles.

Under the hood the components render <isabyte-*> custom elements whose styles key off those properties, so a theme is a plain block of CSS — no build step, no preprocessor, and no per-component configuration.

Prefer designing visually? Theme Studio on your Isabyte account (/theme-studio) is a drag-and-drop editor for these same --isa-* tokens. Export the result as CSS or JSON and apply it with either approach below — the export is a plain token file.

Open Theme Studio →

Manual CSS Theming

Override the default --isa-* custom properties in your own stylesheet:

/* my-theme.css */
:root {
    /* Primary brand colors */
    --isa-color-primary: #1565C0;
    --isa-color-primary-light: #42A5F5;
    --isa-color-primary-dark: #0D47A1;

    /* Secondary / accent */
    --isa-color-secondary: #FF6F00;
    --isa-color-accent: #00BFA5;

    /* Backgrounds */
    --isa-color-surface: #FFFFFF;
    --isa-bg-elevated: #F5F5F5;
    --isa-bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text */
    --isa-color-text: #212121;
    --isa-text-secondary: #757575;
    --isa-text-on-primary: #FFFFFF;

    /* Shape */
    --isa-border-radius: 8px;
    --isa-border-radius-sm: 4px;
    --isa-border-radius-lg: 16px;

    /* Shadows */
    --isa-shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --isa-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --isa-shadow-lg: 0 8px 24px rgba(0,0,0,0.2);

    /* Typography */
    --isa-font-family: 'Inter', 'Segoe UI', sans-serif;
    --isa-font-size-base: 0.9375rem;
}

Link the stylesheet after the Isabyte default styles load — in App.razor for a static theme. A stylesheet locks the theme at page load; to switch at runtime, use the loader below.

Runtime Theme Switching

IsaThemeLoader applies a theme by injecting CSS variables onto :root at runtime. It accepts CSS, JSON, or an SCSS-ZIP bundle, sourced from a URL, a byte array, or a base64 string — JSON is recommended, since it round-trips component-specific overrides that plain CSS cannot. It also offers a built-in dropdown for switching between a dictionary of named themes with no extra wiring.

The visual editor itself is not part of the package: design the theme in Theme Studio on your Isabyte account, export it, and point IsaThemeLoader at the exported file:

<IsaThemeLoader Url="themes/my-theme.json" />

Dark Mode

Define a second set of --isa-* values scoped to a class toggle or a prefers-color-scheme media query:

/* Dark mode via class toggle */
.dark-theme {
    --isa-color-surface: #1E1E1E;
    --isa-bg-elevated: #2D2D2D;
    --isa-color-text: #E0E0E0;
    --isa-text-secondary: #A0A0A0;
    --isa-color-primary: #64B5F6;
    --isa-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
}

/* Or auto-detect via system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --isa-color-surface: #1E1E1E;
        /* ... */
    }
}

Styling individual components

Components have no CssClass parameter. Style them through the --isa-* tokens above, or target the component's own isabyte-* classes in your stylesheet. To style one instance differently, wrap it in your own element with a class and set the tokens there:

<div class="checkout-actions">
    <IsabyteButton Text="Pay now" />
</div>

.checkout-actions {
    --isa-color-primary: #2E7D32;
}

Next Steps

• Getting Started — install the package before theming it.
• Globalization & Localization — cultures and formats.
• Browse the live component demos to see themed components in context.