Styles

Lightview components use DaisyUI for styling — a complete component library built on top of Tailwind CSS with 30+ themes and 50+ components.

Including DaisyUI

Add DaisyUI and Tailwind to your HTML:

<!-- DaisyUI + Tailwind CSS (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Themes

DaisyUI includes 30+ built-in themes. Set a theme with the data-theme attribute:

<html data-theme="dark">
  <!-- Everything inside uses dark theme -->
</html>

<!-- Or set on specific elements -->
<div data-theme="cupcake">
  <button class="btn btn-primary">Cupcake themed!</button>
</div>

Theme Colors

Each theme provides semantic color variables:

primary
secondary
accent
neutral
info
success
warning
error
<!-- Use color utilities -->
<div class="bg-primary text-primary-content">Primary</div>
<button class="btn btn-secondary">Secondary</button>
<span class="badge badge-accent">Accent</span>

Base Colors

Background and surface colors for consistent UI:

base-100
Main background
base-200
Card background
base-300
Input background
base-content
Text color

Component Classes

DaisyUI uses semantic class names for components:

Component Base Class Modifiers
Button btn btn-primary, btn-outline, btn-sm
Card card card-bordered, card-compact, card-side
Badge badge badge-primary, badge-outline, badge-lg
Alert alert alert-info, alert-success, alert-warning
Input input input-bordered, input-primary, input-sm
Toggle toggle toggle-primary, toggle-sm, toggle-lg
Checkbox checkbox checkbox-primary, checkbox-sm
Modal modal modal-top, modal-bottom, modal-middle

Using with Lightview

Two ways to use DaisyUI styles:

1. JavaScript Components

Import Lightview components that handle DaisyUI classes:

import { Button, Card, Badge } from './components/index.js';

const { $ } = Lightview;

$('#app').insert(
    Card({ shadow: 'md' },
        Card.Body({},
            Badge({ color: 'success' }, 'New'),
            Button({ color: 'primary' }, 'Buy Now')
        )
    )
);

2. DaisyUI Classes

Use DaisyUI classes directly with Lightview tags:

const { tags, $ } = Lightview;
const { div, button, span } = tags;

$('#app').insert(
    div({ class: 'card shadow-md' },
        div({ class: 'card-body' },
            span({ class: 'badge badge-success' }, 'New'),
            button({ class: 'btn btn-primary' }, 'Buy Now')
        )
    )
);

Theme Controller

Add a theme switcher to your app:

import ThemeController from './components/actions/theme-controller.js';

// Toggle between light and dark
ThemeController({ type: 'toggle' })

// Or dropdown with multiple themes
ThemeController({ 
    type: 'dropdown', 
    themes: ['light', 'dark', 'cupcake', 'cyberpunk'] 
})

Full DaisyUI Documentation

For complete styling options, themes, and utilities, visit the DaisyUI documentation.