Create Theme
Shape a custom Volt UI theme with live controls, preview it against real components, and copy the generated CSS into your app.
Theme name
Start from
Background Page canvas
#f7fbff Foreground Main text
#172938 Surface Cards and panels
#f7fbff Surface text Text on surfaces
#172938 Muted Subtle fills
#eef6fb Muted text Secondary text
#647888 Border Lines and outlines
#d4e6ef Input Form borders
#d4e6ef Ring Focus color
#1896d4 Primary Main action
#1896d4 Primary text Text on primary
#ffffff Secondary Secondary action
#32b7cf Secondary text Text on secondary
#ffffff Success Positive state
#2bb891 Success text Text on success
#ffffff Warning Caution state
#d9b03d Warning text Text on warning
#172938 Error Error state
#d64c7a Error text Text on error
#ffffff Info Informational state
#268ee8 Info text Text on info
#ffffff Radius
6pxBorder
1pxFocus ring
2pxShadow
10%:root[data-color='custom-theme'] {
--background: #f7fbff;
--foreground: #172938;
--surface: #f7fbff;
--surface-foreground: #172938;
--muted: #eef6fb;
--muted-foreground: #647888;
--border: #d4e6ef;
--input: #d4e6ef;
--ring: #1896d4;
--primary: #1896d4;
--primary-foreground: #ffffff;
--secondary: #32b7cf;
--secondary-foreground: #ffffff;
--success: #2bb891;
--success-foreground: #ffffff;
--warning: #d9b03d;
--warning-foreground: #172938;
--error: #d64c7a;
--error-foreground: #ffffff;
--info: #268ee8;
--info-foreground: #ffffff;
--radius: 6px;
--border-width: 1px;
--border-style: solid;
--ring-width: 2px;
--ring-offset-width: 2px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.025);
--shadow: 0 2px 8px 0 rgb(0 0 0 / 0.03333333333333333);
--shadow-md: 0 8px 20px 0 rgb(0 0 0 / 0.038461538461538464);
--shadow-lg: 0 18px 38px 0 rgb(0 0 0 / 0.045454545454545456);
}
.dark[data-color='custom-theme'] {
--background: #031014;
--foreground: #effcff;
--surface: #071c22;
--surface-foreground: #effcff;
--muted: #102a32;
--muted-foreground: #9bb8c3;
--border: #17323b;
--input: #17323b;
--ring: #28aee8;
--primary: #28aee8;
--primary-foreground: #ffffff;
--secondary: #4dc4d7;
--secondary-foreground: #ffffff;
--success: #2cb68e;
--success-foreground: #ffffff;
--warning: #caa43c;
--warning-foreground: #ffffff;
--error: #dc5d86;
--error-foreground: #ffffff;
--info: #3aa5f2;
--info-foreground: #ffffff;
}