Develop

src/routes/+layout.svelte

@@ -1,6 +1,29 @@
 <script lang="ts">
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
+
+	import { settings } from 'svelte-ux';
+
+	settings({
+		components: {
+			Button: {
+				// same as <Button class="flex-2">
+				classes: 'flex-2',
+				// All component that wrap Button will also use this variant by default,
+				variant: 'outline'
+			},
+			Field: {
+				// All components based on Field will use this as well.
+				labelPlacement: 'top'
+			},
+			MultiSelect: {
+				classes: {
+					root: 'text-white'
+				} 
+			}
+		}
+	});
 </script>
+
 <SvelteToast />
-<slot />
+<slot />

src/routes/app/devices/[dev_eui]/history/+page.svelte

@@ -153,7 +153,7 @@
 		<DateRangeField bind:value stepper rounded center />
 	</div>
 
-	<div class="grid lg:grid-flow-col grid-flow-rowgrid-cols-1 md:grid-cols-2 my-4 gap-2">
+	<div class="grid lg:grid-flow-col grid-flow-rowgrid-cols-1 md:grid-cols-2 my-4 gap-2 text-white">
 		<DarkCard2>
 			<MultiSelect
 				{options}

themes.json

@@ -25,7 +25,8 @@
       "danger": "#ff8f8f",
       "surface-100": "#FFFEF4",
       "surface-200": "#F2F2F2",
-      "surface-300": "#E5E6E6"
+      "surface-300": "#E5E6E6",
+      "surface-content": "#A6ADBB"
     }
 
   }