Toggle the "Enable Preview" option 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.
Copy and paste your theme CSS into /src/theme.postcss, then import the theme into your root layout in
/src/routes/+layout.svelte instead of a premade Skeleton theme. Keep the order as shown.
// Your custom Skeleton theme:import'../theme.postcss';
// This contains the bulk of Skeletons required styles:import'@skeletonlabs/skeleton/styles/all.css';
// Finally, your application's global stylesheet (sometimes labeled 'app.css')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
to convert each Hex color value to RGB in bulk with VS Code.