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:- Vue
- React
- Svelte
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',
},
})
<ArtifactuseProvider config={{
theme: 'dark',
panelWidth: 50,
splitPosition: 60,
colors: {
primary: '#6366f1',
background: '#111827',
surface: '#1f2937',
text: '#f3f4f6',
},
}}>
setArtifactuseContext({
theme: 'dark',
panelWidth: 50,
splitPosition: 60,
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
}
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'
// 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
| 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:.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;
}