docs: Dark mode improvements (#357)

* Dark theme colors

* complicated components

* format

* switch dark colors update

* light improve

* Dark color improvements

- context menu
- date pickers
- dropdown
- switch
- popover shadow

* format

* Code colors

* less bg/fg contrast

src/components/demos/context-menu-demo.svelte

@@ -26,12 +26,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
 				>
 					E
 				</kbd>
@@ -47,12 +47,12 @@
 				</div>
 				<div class="ml-auto flex items-center gap-px">
 					<kbd
-						class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd"
+						class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
 					>
 						⌘
 					</kbd>
 					<kbd
-						class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd"
+						class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
 					>
 						N
 					</kbd>
@@ -99,12 +99,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
 				>
 					D
 				</kbd>

src/components/demos/date-picker-demo.svelte

@@ -40,19 +40,19 @@
 			class="z-50"
 		>
 			<DatePicker.Calendar
-				class="rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
+				class="rounded-[15px] border border-dark-10 bg-background-alt p-[22px] shadow-popover"
 				let:months
 				let:weekdays
 			>
 				<DatePicker.Header class="flex items-center justify-between">
 					<DatePicker.PrevButton
-						class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98"
+						class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
 					>
 						<CaretLeft class="size-6" />
 					</DatePicker.PrevButton>
 					<DatePicker.Heading class="text-[15px] font-medium" />
 					<DatePicker.NextButton
-						class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98"
+						class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
 					>
 						<CaretRight class="size-6" />
 					</DatePicker.NextButton>

src/components/demos/date-range-picker-demo.svelte

@@ -58,19 +58,19 @@
 		</DateRangePicker.Input>
 		<DateRangePicker.Content sideOffset={6} transition={flyAndScale} class="z-50">
 			<DateRangePicker.Calendar
-				class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
+				class="mt-6 rounded-15px border border-dark-10 bg-background-alt p-[22px] shadow-popover"
 				let:months
 				let:weekdays
 			>
 				<DateRangePicker.Header class="flex items-center justify-between">
 					<DateRangePicker.PrevButton
-						class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98"
+						class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
 					>
 						<CaretLeft class="size-6" />
 					</DateRangePicker.PrevButton>
 					<DateRangePicker.Heading class="text-[15px] font-medium" />
 					<DateRangePicker.NextButton
-						class="inline-flex size-10 items-center justify-center rounded-9px bg-background transition-all hover:bg-muted active:scale-98"
+						class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
 					>
 						<CaretRight class="size-6" />
 					</DateRangePicker.NextButton>

src/components/demos/dropdown-menu-demo.svelte

@@ -31,12 +31,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-xs text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[10px] text-muted-foreground shadow-kbd"
 				>
 					P
 				</kbd>
@@ -51,12 +51,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-xs text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[10px] text-muted-foreground shadow-kbd"
 				>
 					B
 				</kbd>
@@ -71,12 +71,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-xs text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+					class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[10px] text-muted-foreground shadow-kbd"
 				>
 					S
 				</kbd>

src/components/demos/switch-demo.svelte

@@ -5,10 +5,10 @@
 <div class="flex items-center space-x-3">
 	<Switch.Root
 		id="marketing"
-		class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted data-[state=unchecked]:shadow-mini-inset"
+		class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset dark:data-[state=checked]:bg-foreground"
 	>
 		<Switch.Thumb
-			class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-background dark:shadow-mini dark:data-[state=unchecked]:border data-[state=unchecked]:dark:bg-background"
+			class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border dark:border-background/30 dark:bg-foreground dark:shadow-popover dark:data-[state=unchecked]:border"
 		/>
 	</Switch.Root>
 	<Label.Root for="marketing" class="text-sm font-medium">Do not disturb</Label.Root>

src/styles/app.postcss

@@ -40,9 +40,9 @@
 
 	.dark {
 		/* Colors */
-		--background: 0 0% 4%;
+		--background: 0 0% 5%;
 		--background-alt: 0 0% 8%;
-		--foreground: 0 0% 96%;
+		--foreground: 0 0% 95%;
 		--foreground-alt: 0 0% 70%;
 		--muted: 240 4% 16%;
 		--muted-foreground: 0 0% 100% / 0.4;
@@ -64,8 +64,7 @@
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.3);
 		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.5) inset;
-
-		--shadow-popover: 0px 7px 12px 3px rbga(0, 0, 0, 0.2);
+		--shadow-popover: 0px 7px 12px 3px hsla(0deg 0% 0% / 30%);
 		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
 		--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
 		--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.4);