Custom theme by mray

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang='ts'>
 	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+	//import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+	import '../theme.postcss';
 	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
 	import '@skeletonlabs/skeleton/styles/all.css';
 	// Most of your app wide CSS should be put in this file

src/theme.postcss

@@ -0,0 +1,100 @@
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 255 255 255;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #096adb */
+	--color-primary-50: 218 233 250; /* ⬅ #dae9fa */
+	--color-primary-100: 206 225 248; /* ⬅ #cee1f8 */
+	--color-primary-200: 194 218 246; /* ⬅ #c2daf6 */
+	--color-primary-300: 157 195 241; /* ⬅ #9dc3f1 */
+	--color-primary-400: 83 151 230; /* ⬅ #5397e6 */
+	--color-primary-500: 9 106 219; /* ⬅ #096adb */
+	--color-primary-600: 8 95 197; /* ⬅ #085fc5 */
+	--color-primary-700: 7 80 164; /* ⬅ #0750a4 */
+	--color-primary-800: 5 64 131; /* ⬅ #054083 */
+	--color-primary-900: 4 52 107; /* ⬅ #04346b */
+	/* secondary | #a371df */
+	--color-secondary-50: 241 234 250; /* ⬅ #f1eafa */
+	--color-secondary-100: 237 227 249; /* ⬅ #ede3f9 */
+	--color-secondary-200: 232 220 247; /* ⬅ #e8dcf7 */
+	--color-secondary-300: 218 198 242; /* ⬅ #dac6f2 */
+	--color-secondary-400: 191 156 233; /* ⬅ #bf9ce9 */
+	--color-secondary-500: 163 113 223; /* ⬅ #a371df */
+	--color-secondary-600: 147 102 201; /* ⬅ #9366c9 */
+	--color-secondary-700: 122 85 167; /* ⬅ #7a55a7 */
+	--color-secondary-800: 98 68 134; /* ⬅ #624486 */
+	--color-secondary-900: 80 55 109; /* ⬅ #50376d */
+	/* tertiary | #d1222e */
+	--color-tertiary-50: 248 222 224; /* ⬅ #f8dee0 */
+	--color-tertiary-100: 246 211 213; /* ⬅ #f6d3d5 */
+	--color-tertiary-200: 244 200 203; /* ⬅ #f4c8cb */
+	--color-tertiary-300: 237 167 171; /* ⬅ #eda7ab */
+	--color-tertiary-400: 223 100 109; /* ⬅ #df646d */
+	--color-tertiary-500: 209 34 46; /* ⬅ #d1222e */
+	--color-tertiary-600: 188 31 41; /* ⬅ #bc1f29 */
+	--color-tertiary-700: 157 26 35; /* ⬅ #9d1a23 */
+	--color-tertiary-800: 125 20 28; /* ⬅ #7d141c */
+	--color-tertiary-900: 102 17 23; /* ⬅ #661117 */
+	/* success | #2da64f */
+	--color-success-50: 224 242 229; /* ⬅ #e0f2e5 */
+	--color-success-100: 213 237 220; /* ⬅ #d5eddc */
+	--color-success-200: 203 233 211; /* ⬅ #cbe9d3 */
+	--color-success-300: 171 219 185; /* ⬅ #abdbb9 */
+	--color-success-400: 108 193 132; /* ⬅ #6cc184 */
+	--color-success-500: 45 166 79; /* ⬅ #2da64f */
+	--color-success-600: 41 149 71; /* ⬅ #299547 */
+	--color-success-700: 34 125 59; /* ⬅ #227d3b */
+	--color-success-800: 27 100 47; /* ⬅ #1b642f */
+	--color-success-900: 22 81 39; /* ⬅ #165127 */
+	/* warning | #c28900 */
+	--color-warning-50: 246 237 217; /* ⬅ #f6edd9 */
+	--color-warning-100: 243 231 204; /* ⬅ #f3e7cc */
+	--color-warning-200: 240 226 191; /* ⬅ #f0e2bf */
+	--color-warning-300: 231 208 153; /* ⬅ #e7d099 */
+	--color-warning-400: 212 172 77; /* ⬅ #d4ac4d */
+	--color-warning-500: 194 137 0; /* ⬅ #c28900 */
+	--color-warning-600: 175 123 0; /* ⬅ #af7b00 */
+	--color-warning-700: 146 103 0; /* ⬅ #926700 */
+	--color-warning-800: 116 82 0; /* ⬅ #745200 */
+	--color-warning-900: 95 67 0; /* ⬅ #5f4300 */
+	/* error | #bf4d00 */
+	--color-error-50: 245 228 217; /* ⬅ #f5e4d9 */
+	--color-error-100: 242 219 204; /* ⬅ #f2dbcc */
+	--color-error-200: 239 211 191; /* ⬅ #efd3bf */
+	--color-error-300: 229 184 153; /* ⬅ #e5b899 */
+	--color-error-400: 210 130 77; /* ⬅ #d2824d */
+	--color-error-500: 191 77 0; /* ⬅ #bf4d00 */
+	--color-error-600: 172 69 0; /* ⬅ #ac4500 */
+	--color-error-700: 143 58 0; /* ⬅ #8f3a00 */
+	--color-error-800: 115 46 0; /* ⬅ #732e00 */
+	--color-error-900: 94 38 0; /* ⬅ #5e2600 */
+	/* surface | #1e2d40 */
+	--color-surface-50: 221 224 226; /* ⬅ #dde0e2 */
+	--color-surface-100: 210 213 217; /* ⬅ #d2d5d9 */
+	--color-surface-200: 199 203 207; /* ⬅ #c7cbcf */
+	--color-surface-300: 165 171 179; /* ⬅ #a5abb3 */
+	--color-surface-400: 98 108 121; /* ⬅ #626c79 */
+	--color-surface-500: 30 45 64; /* ⬅ #1e2d40 */
+	--color-surface-600: 27 41 58; /* ⬅ #1b293a */
+	--color-surface-700: 23 34 48; /* ⬅ #172230 */
+	--color-surface-800: 18 27 38; /* ⬅ #121b26 */
+	--color-surface-900: 15 22 31; /* ⬅ #0f161f */
+	
+}
+
+
+