Theme Generator

Add your custom theme to /src/theme.postcss, then import this file into /src/routes/+layout.svelte.

typescript 
import '../theme.postcss'; // <--
import '../app.postcss';
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
css 
:root {
	/* =~= Skeleton Theme | Tailwind =~= */
	/* ~ primary (emerald | #10b981) ~ */
	--color-primary-50: 236 253 245; /* ⬅ #ecfdf5 */
	--color-primary-100: 209 250 229; /* ⬅ #d1fae5 */
	--color-primary-200: 167 243 208; /* ⬅ #a7f3d0 */
	--color-primary-300: 110 231 183; /* ⬅ #6ee7b7 */
	--color-primary-400: 52 211 153; /* ⬅ #34d399 */
	--color-primary-500: 16 185 129; /* ⬅ #10b981 */
	--color-primary-600: 5 150 105; /* ⬅ #059669 */
	--color-primary-700: 4 120 87; /* ⬅ #047857 */
	--color-primary-800: 6 95 70; /* ⬅ #065f46 */
	--color-primary-900: 6 78 59; /* ⬅ #064e3b */
	/* ~ accent (indigo | #6366f1) ~ */
	--color-accent-50: 238 242 255; /* ⬅ #eef2ff */
	--color-accent-100: 224 231 255; /* ⬅ #e0e7ff */
	--color-accent-200: 199 210 254; /* ⬅ #c7d2fe */
	--color-accent-300: 165 180 252; /* ⬅ #a5b4fc */
	--color-accent-400: 129 140 248; /* ⬅ #818cf8 */
	--color-accent-500: 99 102 241; /* ⬅ #6366f1 */
	--color-accent-600: 79 70 229; /* ⬅ #4f46e5 */
	--color-accent-700: 67 56 202; /* ⬅ #4338ca */
	--color-accent-800: 55 48 163; /* ⬅ #3730a3 */
	--color-accent-900: 49 46 129; /* ⬅ #312e81 */
	/* ~ ternary (yellow | #eab308) ~ */
	--color-ternary-50: 254 252 232; /* ⬅ #fefce8 */
	--color-ternary-100: 254 249 195; /* ⬅ #fef9c3 */
	--color-ternary-200: 254 240 138; /* ⬅ #fef08a */
	--color-ternary-300: 253 224 71; /* ⬅ #fde047 */
	--color-ternary-400: 250 204 21; /* ⬅ #facc15 */
	--color-ternary-500: 234 179 8; /* ⬅ #eab308 */
	--color-ternary-600: 202 138 4; /* ⬅ #ca8a04 */
	--color-ternary-700: 161 98 7; /* ⬅ #a16207 */
	--color-ternary-800: 133 77 14; /* ⬅ #854d0e */
	--color-ternary-900: 113 63 18; /* ⬅ #713f12 */
	/* ~ warning (rose | #f43f5e) ~ */
	--color-warning-50: 255 241 242; /* ⬅ #fff1f2 */
	--color-warning-100: 255 228 230; /* ⬅ #ffe4e6 */
	--color-warning-200: 254 205 211; /* ⬅ #fecdd3 */
	--color-warning-300: 253 164 175; /* ⬅ #fda4af */
	--color-warning-400: 251 113 133; /* ⬅ #fb7185 */
	--color-warning-500: 244 63 94; /* ⬅ #f43f5e */
	--color-warning-600: 225 29 72; /* ⬅ #e11d48 */
	--color-warning-700: 190 18 60; /* ⬅ #be123c */
	--color-warning-800: 159 18 57; /* ⬅ #9f1239 */
	--color-warning-900: 136 19 55; /* ⬅ #881337 */
	/* ~ surface (gray | #6b7280) ~ */
	--color-surface-50: 249 250 251; /* ⬅ #f9fafb */
	--color-surface-100: 243 244 246; /* ⬅ #f3f4f6 */
	--color-surface-200: 229 231 235; /* ⬅ #e5e7eb */
	--color-surface-300: 209 213 219; /* ⬅ #d1d5db */
	--color-surface-400: 156 163 175; /* ⬅ #9ca3af */
	--color-surface-500: 107 114 128; /* ⬅ #6b7280 */
	--color-surface-600: 75 85 99; /* ⬅ #4b5563 */
	--color-surface-700: 55 65 81; /* ⬅ #374151 */
	--color-surface-800: 31 41 55; /* ⬅ #1f2937 */
	--color-surface-900: 17 24 39; /* ⬅ #111827 */
}