Theming and Styling

Triiiceratops is designed to be highly customizable, supporting both "drop-in" theming (via DaisyUI) and deeply integrated "headless" styling (via your own Tailwind setup).

1. Built-in Themes (Easiest)

If you just want it to look good out of the box, use one of the 35 pre-built DaisyUI themes.

Available Themes

Usage

<triiiceratops-viewer
    manifest-id="..."
    theme="dark"
></triiiceratops-viewer>

<script>
    import { TriiiceratopsViewer } from 'triiiceratops';
    // Essential: Import the library styles!
    import 'triiiceratops/style.css';
</script>

<TriiiceratopsViewer
    manifestId="..."
    theme="dracula"
/>

2. Custom Theme Configuration

You can override individual theme variables to match your exact brand colors without writing CSS.

Theme Configuration Reference

The themeConfig object allows you to override the following properties:

Semantic Colors

These control the main UI elements. Colors can be Hex (#3b82f6), RGB (rgb(59, 130, 246)), or OKLCH (oklch(60% 0.25 250)).

Base Colors (Backgrounds)

State Colors

UI Shape & Sizing

Effects

Example Usage

<triiiceratops-viewer
    manifest-id="..."
    theme="light"
    theme-config='{"primary":"#ff0000","radiusBox":"0px"}'
></triiiceratops-viewer>

<triiiceratops-viewer manifest-id="..."></triiiceratops-viewer>

<script>
    const viewer = document.querySelector('triiiceratops-viewer');
    viewer.theme = 'light';
    viewer.themeConfig = {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
        accent: '#f59e0b',
        base100: '#ffffff',
        base200: '#f3f4f6',
        baseContent: '#1f2937',
        radiusBox: '0.75rem',
        radiusField: '0.5rem',
        border: '2px',
    };
</script>

<script>
    import { TriiiceratopsViewer } from 'triiiceratops';
    import 'triiiceratops/style.css';
    import type { ThemeConfig } from 'triiiceratops';

    const customTheme: ThemeConfig = {
        primary: '#0ea5e9',
        secondary: '#6366f1',
        radiusBox: '1rem',
    };
</script>

<TriiiceratopsViewer manifestId="..." theme="light" themeConfig={customTheme} />

3. Advanced: SvelteKit + Tailwind Integration

If you are building a SvelteKit or Vite + Svelte application that already uses Tailwind CSS v4, you do not need to import our CSS file (triiiceratops/style.css).

Instead, you can use the @source directive to tell your Tailwind compiler to scan the Triiiceratops library files. This allows you to:

1. Deduplicate CSS: Generate only the styles used by the viewer, merged with your app's styles.
2. Theme via CSS: Define your themes directly in your own CSS using standard Tailwind/DaisyUI @theme blocks.

Step-by-Step Guide

1. Install Dependencies: ensure you have Tailwind v4 installed.
2. Configure CSS: In your main CSS file (e.g., src/app.css):

@import 'tailwindcss';

/* 
   Tell Tailwind to scan the Triiiceratops library in node_modules.
   This finds all the classes used inside the viewer.
*/
@source "../node_modules/triiiceratops/dist";

@plugin "daisyui" {
    /* If you aren't using DaisyUI in your project already, include the
    following two lines so that so that DaisyUI's global styles don't
    contaminate your app's styles. */
    exclude: rootcolor, rootstyle, reset, scrollbar, viewport;
    root: '#triiiceratops-viewer';
    /* Define which themes you want available */
    themes:
        light --default,
        dark --prefersdark,
        my-custom-theme;
}

/* Now you can define a custom theme in pure CSS! */
@theme my-custom-theme {
    --color-primary: oklch(65% 0.25 260); /* Purple */
    --color-secondary: oklch(80% 0.1 50); /* Orange */
    --radius-box: 0px; /* Square corners */
}

1. Consume the Component: import TriiiceratopsViewer as usual, but DO NOT import style.css.

2. Apply Your Theme: You can now apply your custom theme using standard CSS inheritance or the data-theme attribute on a parent container.

<!-- src/routes/+page.svelte -->
<!-- Set the theme by adding it as the value of data-theme to any parent container -->
<div data-theme="my-custom-theme">
    <TriiiceratopsViewer manifestId="..." />
</div>

This efficiently builds the viewer's styles into your application's stylesheet.