fix: dark/light theme fixes

packages/website/src/components/Section.tsx

@@ -19,7 +19,7 @@ export function Section({
 	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
 
 	return (
-		<div>
+		<div className="flex flex-col">
 			<Disclosure
 				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded p-3"
 				state={disclosure}

packages/website/src/components/SidebarItems.tsx

@@ -89,7 +89,7 @@ export function SidebarItems({
 						{groupItems[group].map((member, index) => (
 							<Link key={index} href={member.path} prefetch={false}>
 								<a
-									className={`dark:border-dark-100 border-light-800 ml-5 border-l p-[5px] pl-6 ${
+									className={`dark:border-dark-100 border-light-800 ml-5 flex flex-col border-l p-[5px] pl-6 ${
 										asPathWithoutQueryAndAnchor === member.path
 											? 'bg-blurple text-white'
 											: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'

packages/website/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import NextProgress from 'next-progress';
 import { ThemeProvider } from 'next-themes';
-import '@unocss/reset/antfu.css';
+import '@unocss/reset/tailwind.css';
 import '../styles/unocss.css';
 import '../styles/main.css';
 

packages/website/src/styles/main.css

@@ -15,16 +15,21 @@
 html,
 body {
 	height: 100%;
+	color-scheme: light;
 }
 
 #__next {
 	height: 100%;
 }
 
-.light [data-theme='dark'] {
+[data-theme='dark'] {
 	display: none;
 }
 
+.dark [data-theme='dark'] {
+	display: block;
+}
+
 .dark [data-theme='light'] {
 	display: none;
 }