> ## Documentation Index
> Fetch the complete documentation index at: https://artifactuse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize colors and styles

## Theme Modes

```javascript theme={null}
const { setTheme, getTheme } = useArtifactuse()

setTheme('dark')
setTheme('light')
setTheme('auto')  // Follow system preference

const current = getTheme()
```

## Configuration

Set colors in the provider config:

<Tabs>
  <Tab title="Vue">
    ```javascript theme={null}
    provideArtifactuse({
      theme: 'dark',
      panelWidth: 50,      // Initial panel width % (25–75)
      splitPosition: 60,   // Initial split view % (20–80)
      colors: {
        primary: '#6366f1',
        background: '#111827',
        surface: '#1f2937',
        text: '#f3f4f6',
      },
    })
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    <ArtifactuseProvider config={{
      theme: 'dark',
      panelWidth: 50,
      splitPosition: 60,
      colors: {
        primary: '#6366f1',
        background: '#111827',
        surface: '#1f2937',
        text: '#f3f4f6',
      },
    }}>
    ```
  </Tab>

  <Tab title="Svelte">
    ```javascript theme={null}
    setArtifactuseContext({
      theme: 'dark',
      panelWidth: 50,
      splitPosition: 60,
      colors: {
        primary: '#6366f1',
        background: '#111827',
        surface: '#1f2937',
        text: '#f3f4f6',
      },
    })
    ```
  </Tab>
</Tabs>

## Color Formats

Both hex and RGB formats are supported:

```javascript theme={null}
colors: {
  primary: '#6366f1',      // 6-digit hex
  surface: '#1f2937',      // 6-digit hex
  text: '#fff',            // 3-digit shorthand
  border: '75, 85, 99',    // RGB string
}
```

Hex colors are auto-converted to RGB internally for `rgba()` support.

## CSS Variables

Override CSS custom properties directly:

```css theme={null}
:root {
  /* Primary colors */
  --artifactuse-primary: 99, 102, 241;
  --artifactuse-primary-hover: 79, 82, 221;
  
  /* Background */
  --artifactuse-bg: 255, 255, 255;
  --artifactuse-bg-secondary: 249, 250, 251;
  --artifactuse-bg-tertiary: 243, 244, 246;
  
  /* Text */
  --artifactuse-text: 17, 24, 39;
  --artifactuse-text-secondary: 107, 114, 128;
  --artifactuse-text-muted: 156, 163, 175;
  
  /* Border */
  --artifactuse-border: 229, 231, 235;
  --artifactuse-border-hover: 209, 213, 219;
  
  /* Status */
  --artifactuse-success: 34, 197, 94;
  --artifactuse-warning: 245, 158, 11;
  --artifactuse-error: 239, 68, 68;
  
  /* Panel */
  --artifactuse-panel-width: 500px;
  
  /* Border radius */
  --artifactuse-radius-sm: 0.25rem;
  --artifactuse-radius: 0.5rem;
  --artifactuse-radius-lg: 0.75rem;
}
```

## Dark Theme

```css theme={null}
[data-theme="dark"] {
  --artifactuse-bg: 17, 24, 39;
  --artifactuse-bg-secondary: 31, 41, 55;
  --artifactuse-bg-tertiary: 55, 65, 81;
  
  --artifactuse-text: 249, 250, 251;
  --artifactuse-text-secondary: 156, 163, 175;
  --artifactuse-text-muted: 107, 114, 128;
  
  --artifactuse-border: 55, 65, 81;
  --artifactuse-border-hover: 75, 85, 99;
}
```

## Custom Theme

Create your own theme:

```css theme={null}
[data-theme="brand"] {
  --artifactuse-primary: 236, 72, 153;  /* Pink */
  --artifactuse-bg: 15, 23, 42;
  --artifactuse-text: 248, 250, 252;
}
```

```javascript theme={null}
setTheme('brand')
```

## Modular CSS Imports

Import all styles at once:

```javascript theme={null}
import 'artifactuse/styles'
```

Or import only what you need for smaller bundle size:

```javascript theme={null}
// Base (required)
import 'artifactuse/styles/base/variables.css'
import 'artifactuse/styles/base/reset.css'

// Components (pick what you use)
import 'artifactuse/styles/components/message.css'
import 'artifactuse/styles/components/panel.css'
import 'artifactuse/styles/components/card.css'
import 'artifactuse/styles/components/toggle.css'
import 'artifactuse/styles/components/viewer.css'
import 'artifactuse/styles/components/form.css'
import 'artifactuse/styles/components/social.css'

// Processors (pick what you use)
import 'artifactuse/styles/processors/image.css'
import 'artifactuse/styles/processors/video.css'
import 'artifactuse/styles/processors/audio.css'
import 'artifactuse/styles/processors/code.css'
import 'artifactuse/styles/processors/table.css'
import 'artifactuse/styles/processors/math.css'
import 'artifactuse/styles/processors/embed.css'

// Utilities
import 'artifactuse/styles/utilities/animations.css'
import 'artifactuse/styles/utilities/responsive.css'
```

<Note>
  When using modular imports, always import `base/variables.css` and `base/reset.css` first, and `utilities/` files last.
</Note>

### CSS File Reference

| File                       | Description                            |
| -------------------------- | -------------------------------------- |
| `base/variables.css`       | CSS custom properties, theme colors    |
| `base/reset.css`           | Base resets and utility classes        |
| `components/message.css`   | ArtifactuseAgentMessage styling        |
| `components/panel.css`     | ArtifactusePanel styling               |
| `components/card.css`      | ArtifactuseCard styling                |
| `components/toggle.css`    | ArtifactusePanelToggle styling         |
| `components/viewer.css`    | Media lightbox viewer                  |
| `components/form.css`      | Inline form styling                    |
| `components/social.css`    | Social preview styling (all platforms) |
| `processors/image.css`     | Image containers, galleries            |
| `processors/video.css`     | Video embeds, lazy-loaded facades      |
| `processors/audio.css`     | Audio players, Spotify/SoundCloud      |
| `processors/code.css`      | Code blocks, syntax highlighting       |
| `processors/table.css`     | Enhanced tables with sorting           |
| `processors/math.css`      | Math/LaTeX, Mermaid diagrams           |
| `processors/embed.css`     | Maps, documents, interactive embeds    |
| `utilities/animations.css` | Keyframes, transitions                 |
| `utilities/responsive.css` | Media queries, print styles            |

## Panel Styling

Customize the side panel:

```css theme={null}
.artifactuse-panel {
  --artifactuse-panel-width: 600px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
```

## Syntax Highlighting

Override code syntax colors:

```css theme={null}
:root {
  --artifactuse-syntax-keyword: 236, 72, 153;
  --artifactuse-syntax-string: 34, 197, 94;
  --artifactuse-syntax-number: 245, 158, 11;
  --artifactuse-syntax-comment: 107, 114, 128;
  --artifactuse-syntax-function: 99, 102, 241;
}
```