fix: dark/light theme fixes

This commit is contained in:
iCrawl
2022-09-07 18:39:02 +02:00
parent d8e774138d
commit 8d07ea9a62
4 changed files with 9 additions and 4 deletions

View File

@@ -19,7 +19,7 @@ export function Section({
const disclosure = useDisclosureState({ defaultOpen: !defaultClosed }); const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
return ( return (
<div> <div className="flex flex-col">
<Disclosure <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" 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} state={disclosure}

View File

@@ -89,7 +89,7 @@ export function SidebarItems({
{groupItems[group].map((member, index) => ( {groupItems[group].map((member, index) => (
<Link key={index} href={member.path} prefetch={false}> <Link key={index} href={member.path} prefetch={false}>
<a <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 asPathWithoutQueryAndAnchor === member.path
? 'bg-blurple text-white' ? 'bg-blurple text-white'
: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800' : 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'

View File

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

View File

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