fix(docs): dark mode styles

huntabyte · May 27, 2023 · f10638c · f10638c · vercel · May 27, 2023
1 parent 74afcc3
commit f10638c
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 9 deletions.
diff --git a/apps/www/src/app.html b/apps/www/src/app.html
@@ -9,7 +9,7 @@
 
 	<body
 		data-sveltekit-preload-data="hover"
-		class="min-h-screen bg-background antialiased font-sans"
+		class="min-h-screen bg-background antialiased font-sans dark"
 	>
 		<div style="display: contents" class="flex min-h-screen flex-col">
 			%sveltekit.body%

diff --git a/apps/www/src/lib/components/docs/examples/alert/AlertDemoDestructive.svelte b/apps/www/src/lib/components/docs/examples/alert/AlertDemoDestructive.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Terminal } from "lucide-svelte";
+	import { AlertCircle } from "lucide-svelte";
 	import { Alert, AlertDescription, AlertTitle } from "$components/ui/alert";
 </script>
 
 <Alert variant="destructive">
-	<Terminal class="h-4 w-4" />
-	<AlertTitle>Heads up!</AlertTitle>
+	<AlertCircle class="h-4 w-4" />
+	<AlertTitle>Error</AlertTitle>
 	<AlertDescription>
-		You can add components to your app using the cli.
+		Your session has expired. Please login again.
 	</AlertDescription>
 </Alert>
diff --git a/apps/www/src/lib/components/docs/mdsvex/mdsvex.svelte b/apps/www/src/lib/components/docs/mdsvex/mdsvex.svelte
@@ -1,5 +1,6 @@
 <!-- MDsveX Layout Component -->
 <script context="module">
+	import "../../../../styles/mdsvex.css";
 	import {
 		a,
 		blockquote,

diff --git a/apps/www/src/lib/components/docs/nav/MobileLink.svelte b/apps/www/src/lib/components/docs/nav/MobileLink.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from "$app/stores";
 	import { cn } from "$lib/utils";
 
 	export let href: string;
@@ -11,7 +12,10 @@
 <a
 	{href}
 	on:click={() => (open = false)}
-	class={cn(className)}
+	class={cn(
+		$page.url.pathname === href ? "text-foreground" : "text-foreground/60",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />

diff --git a/apps/www/src/lib/components/docs/nav/MobileNav.svelte b/apps/www/src/lib/components/docs/nav/MobileNav.svelte
@@ -22,7 +22,11 @@
 		</Button>
 	</SheetTrigger>
 	<SheetContent size="xl" position="left" class="pr-0">
-		<MobileLink href="/" class="flex items-center" bind:open>
+		<MobileLink
+			href="/"
+			class="flex items-center !text-foreground"
+			bind:open
+		>
 			<Icons.logo class="mr-2 h-4 w-4" />
 			<span class="font-bold">{siteConfig.name}</span>
 		</MobileLink>

diff --git a/apps/www/src/routes/+page.svelte b/apps/www/src/routes/+page.svelte
@@ -19,7 +19,7 @@
 			Beautifully designed components that you can copy and paste into
 			your apps. Accessible. Customizable. Open Source.
 		</PageHeaderDescription>
-		<p class="text-sm text-red-600">
+		<p class="text-sm text-red-600 dark:text-red-400">
 			This is an unofficial port of <a
 				href={siteConfig.links.shadGithub}
 				target="_blank"

diff --git a/apps/www/src/routes/docs/+layout.svelte b/apps/www/src/routes/docs/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import "../../styles/mdsvex.css";
 	import DocsSidebarNav from "$components/docs/nav/DocsSidebarNav.svelte";
 	import { docsConfig } from "$lib/config/docs";
 </script>

diff --git a/apps/www/src/styles/globals.css b/apps/www/src/styles/globals.css
@@ -80,6 +80,26 @@
 		@apply bg-background text-foreground;
 		font-feature-settings: "rlig" 1, "calt" 1;
 	}
+
+	* {
+		scrollbar-width: auto;
+		scrollbar-color: #7f8ea3;
+	}
+
+	/* Chrome, Edge, and Safari */
+	*::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		background-color: #7f8ea3;
+		border: 3px none #ffffff;
+	}
 }
 
 @layer utilities {

diff --git a/apps/www/src/styles/mdsvex.css b/apps/www/src/styles/mdsvex.css
@@ -16,6 +16,7 @@
 
 .dark [data-theme="dark"] {
 	display: flex;
+	flex-direction: column;
 }
 
 [data-rehype-pretty-code-fragment] {