Theme Generator
Enable "Live Preview Mode" to begin creating a new theme. The entire documentation site will update as you progress. You can navigate to different sections without losing your settings as long as you do not refresh the page. Disabling the preview will reset back to your original theme.
Live Preview Mode
Colors
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
50
100
200
300
400
500
Text
600
700
800
900
Fonts
Text Color
Border Radius
Border Size
Preview
surface
primary
secondary
tertiary
glass
success
warning
error
Importing Your Theme
Copy and paste your theme CSS into /src/theme.postcss, then in/src/routes/+layout.svelte remove any preset theme,
then replace with your custom theme.
import '../theme.postcss'; // <--
import '../app.postcss';Advanced Color Curation
Looking for deeper customization? We recommend using Palette Generator. This includes support for hue, saturation, and lightness adjustments. Pair this with the Hex-To-RGB extension to convert each Hex color value to RGB in bulk with VS Code.