Skip to main content

​
Theme Modes

const { setTheme, getTheme } = useArtifactuse()

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

const current = getTheme()

​
Configuration

Set colors in the provider config: 
provideArtifactuse({
  theme: 'dark',
  colors: {
    primary: '#6366f1',
    background: '#111827',
    surface: '#1f2937',
    text: '#f3f4f6',
  },
})

​
Color Formats

Both hex and RGB formats are supported: 
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: 
: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

[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: 
[data-theme="brand"] {
  --artifactuse-primary: 236, 72, 153;  /* Pink */
  --artifactuse-bg: 15, 23, 42;
  --artifactuse-text: 248, 250, 252;
}

setTheme('brand')

​
Modular CSS Imports

Import all styles at once: 
import 'artifactuse/styles'
Or import only what you need for smaller bundle size: 
// 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'
When using modular imports, always import base/variables.css and base/reset.css first, and utilities/ files last.

​
CSS File Reference

FileDescription
base/variables.cssCSS custom properties, theme colors
base/reset.cssBase resets and utility classes
components/message.cssArtifactuseAgentMessage styling
components/panel.cssArtifactusePanel styling
components/card.cssArtifactuseCard styling
components/toggle.cssArtifactusePanelToggle styling
components/viewer.cssMedia lightbox viewer
components/form.cssInline form styling
components/social.cssSocial preview styling (all platforms)
processors/image.cssImage containers, galleries
processors/video.cssVideo embeds, lazy-loaded facades
processors/audio.cssAudio players, Spotify/SoundCloud
processors/code.cssCode blocks, syntax highlighting
processors/table.cssEnhanced tables with sorting
processors/math.cssMath/LaTeX, Mermaid diagrams
processors/embed.cssMaps, documents, interactive embeds
utilities/animations.cssKeyframes, transitions
utilities/responsive.cssMedia queries, print styles

​
Panel Styling

Customize the side panel: 
.artifactuse-panel {
  --artifactuse-panel-width: 600px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

​
Syntax Highlighting

Override code syntax colors: 
: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;
}