dark mode and page transitions

bitbloxhub · Jul 23, 2023 · c743817 · c743817
1 parent b6f9685
commit c743817
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -9,5 +9,8 @@ export default defineConfig({
 	integrations: [
 		svelte(),
 		UnoCSS()
-	]
+	],
+	experimental: {
+		viewTransitions: true
+	}
 })
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 --- 
 import Header from "../components/Header.astro"
+import { ViewTransitions } from "astro:transitions"
 interface Props {
 	title: string
 }
@@ -16,9 +17,10 @@ const { title } = Astro.props
 		<link rel="icon" href="https://github.com/bitbloxhub.png">
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
+		<ViewTransitions />
 		<script src="https://instant.page/5.2.0" type="module" />
 	</head>
-	<body>
+	<body transition:animate="morph" class="dark:bg-black dark:text-white">
 		<Header />
 		<slot />
 	</body>