Styles

Including DaisyUI

DaisyUI and Tailwind pollute the global CSS space and redefine things like H1. By default Lightview components isolate DaisyUI and Tailwind styles to Shadow DOM. If you would like to use DaisyUI and Tailwind styles outside of Shadow DOM, add DaisyUI and Tailwind to your HTML:

<!-- DaisyUI + Tailwind CSS (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

Themes

DaisyUI includes many built-in themes. You can try these themes by selecting a theme using the dropdown in the top right corner of this page. This will impact the theme colors globally across all components.

Theme Colors

Each theme provides semantic color variables. Here is how they look in the current theme:

Base Colors

Background and surface colors for consistent UI in the current theme:

Registering Stylesheets

When using Shadow DOM, global styles are not inherited. LightviewX provides methods to register stylesheets that can be adopted by components or applied globally to all components.

Named Stylesheets

Register a stylesheet by name, and components can then request it by ID. You can register styles from a string, a URL, or an existing <style> tag.

// From a CSS string
LightviewX.registerStyleSheet('custom-vars', ':host { --my-color: #ff00ff; }');

// From a URL
LightviewX.registerStyleSheet('/styles/extra.css');

// From an existing style tag in the document
LightviewX.registerStyleSheet('#global-overrides');

Global Theme Stylesheets

To apply a stylesheet to every Shadow DOM component automatically (like a global theme override), use registerThemeSheet.

// This sheet will be adopted by all components
LightviewX.registerThemeSheet('/styles/theme-overrides.css');

For more details on these functions, see the API Reference.

Controlling Themes Programmatically

You can control the active theme globally using LightviewX.

Setting the Theme

Use setTheme to change the active theme. This updates the themeSignal and persists the choice to LocalStorage.

// Set theme to 'dark'
LightviewX.setTheme('dark');

// Set theme to 'cyberpunk'
LightviewX.setTheme('cyberpunk');

Reactive Theme Signal

Access the current theme reactively using LightviewX.themeSignal.

const { themeSignal } = LightviewX;

// Build a reactive component that logs the theme
const ThemeLogger = () => {
    return div({}, () => `Current theme is: ${themeSignal.value}`);
};