diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 35f47b824a5..1f1352f90a5 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -147,6 +147,11 @@ export const docsConfig: DocsConfig = {
href: "/docs/dark-mode/vite",
items: [],
},
+ {
+ title: "Astro",
+ href: "/docs/dark-mode/astro",
+ items: [],
+ },
],
},
{
diff --git a/apps/www/content/docs/dark-mode/astro.mdx b/apps/www/content/docs/dark-mode/astro.mdx
new file mode 100644
index 00000000000..01e4ffe4227
--- /dev/null
+++ b/apps/www/content/docs/dark-mode/astro.mdx
@@ -0,0 +1,121 @@
+---
+title: Astro
+description: Adding dark mode to your astro app.
+---
+
+## Dark mode
+
+
+
+### Create an inline theme script
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+---
+
+
+
+
+
+ Astro
+
+
+
+```
+
+### Add a mode toggle
+
+```tsx title="src/components/ModeToggle.tsx"
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+ const [theme, setThemeState] = React.useState<
+ "theme-light" | "dark" | "system"
+ >("theme-light")
+
+ React.useEffect(() => {
+ const isDarkMode = document.documentElement.classList.contains("dark")
+ setThemeState(isDarkMode ? "dark" : "theme-light")
+ }, [])
+
+ React.useEffect(() => {
+ const isDark =
+ theme === "dark" ||
+ (theme === "system" &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
+ document.documentElement.classList[isDark ? "add" : "remove"]("dark")
+ }, [theme])
+
+ return (
+
+
+
+
+
+ setThemeState("theme-light")}>
+ Light
+
+ setThemeState("dark")}>
+ Dark
+
+ setThemeState("system")}>
+ System
+
+
+
+ )
+}
+```
+
+### Display the mode toggle
+
+Place a mode toggle on your site to toggle between light and dark mode.
+
+```astro title="src/pages/index.astro"
+---
+import '../styles/globals.css'
+import { ModeToggle } from '@/components/ModeToggle';
+---
+
+
+
+
+
+ Astro
+
+
+
+```
+
+
diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx
index 214118d608a..c743279c3c2 100644
--- a/apps/www/content/docs/dark-mode/index.mdx
+++ b/apps/www/content/docs/dark-mode/index.mdx
@@ -30,6 +30,19 @@ description: Adding dark mode to your site.
Vite
+
+
+ Astro
+
## Other frameworks