Theming

Loquix uses CSS custom properties for design decisions and Shadow DOM for component encapsulation. Theme the system with shared tokens, then use component variables or CSS parts for focused changes.

Load the base tokens

Import the variables once in your browser entry point:

import '@loquix/core/tokens/variables.css';

The shared tokens cover color, surfaces, typography, spacing, states, radius, and motion:

:root {
  --loquix-ai-color: #7c3aed;
  --loquix-user-color: #2563eb;
  --loquix-surface-bg: #ffffff;
  --loquix-text-color: #111827;
  --loquix-border-color: #e5e7eb;
  --loquix-border-radius: 12px;
  --loquix-font-family: system-ui, sans-serif;
}

Apply a brand theme

Custom properties inherit through Shadow DOM, so they can be scoped to the whole app or one chat:

.acme-assistant {
  --loquix-ai-color: #e45a34;
  --loquix-ai-color-subtle: #fff0eb;
  --loquix-user-color: #3558d4;
  --loquix-message-user-bg: #edf1ff;
  --loquix-input-focus-color: #e45a34;
  --loquix-send-button-bg: #e45a34;
  --loquix-border-radius: 18px;
}

Scoped brand tokens Live component

Theme one chat without affecting the rest of the page.

Dark mode

Load the built-in dark token overrides:

import '@loquix/core/tokens/themes/dark';

Then apply either supported selector to an ancestor:

<main data-theme="dark">
  <loquix-chat-container>…</loquix-chat-container>
</main>

<loquix-chat-container class="loquix-theme-dark">
  …
</loquix-chat-container>

For an application-level theme switch, update the root attribute:

document.documentElement.dataset.theme = 'dark';

Note

The theme import contains only overrides. Keep the base variables.css import as well.

Choose the right styling layer

1. Shared tokens — use global --loquix-* variables for brand color, typography, surfaces, spacing, and state colors.
2. Component variables — use the custom properties listed on each component page for a local design adjustment.
3. CSS parts — use ::part() when a documented internal element needs layout, border, shadow, or state styling.
4. Slots — replace content structurally when styling alone cannot express the design.

Component variable and CSS part

loquix-chat-composer {
  --loquix-composer-container-border-radius: 20px;
}

loquix-chat-composer::part(send-button) {
  box-shadow: 0 8px 24px rgb(228 90 52 / 28%);
}

Theme contract

• Prefer documented custom properties and parts over selectors inside Shadow DOM.
• Do not rely on undocumented internal class names.
• Keep focus states visible and maintain text contrast when changing colors.
• Test both light and dark themes after overriding semantic tokens.
• Scope product-specific themes to a container when multiple assistants share one page.

Next, review the application responsibilities in Accessibility.