Lea/maddy-admin
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix theming

Browse source
This commit is contained in:
Lea 2024-01-16 20:44:16 +01:00
parent 8eac71764a
commit 13426f34eb
Signed by: Lea
GPG key ID: 1BAFFE8347019C42
4 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/globals.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

3
src/app/layout.tsx
View file

@ -1,6 +1,7 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import ThemeWrapper from '@/lib/components/ThemeWrapper';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
@ -16,7 +17,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>
<body className={`${inter.className} p-4`}>
<ThemeWrapper>
{children}
</ThemeWrapper>

9
src/app/page.tsx
View file

@ -1,12 +1,11 @@
"use client";
import { Button, Flex, Text } from '@radix-ui/themes';
import { Heading } from '@radix-ui/themes';
export default function Home() {
return (
<Flex direction="column" gap="2">
<Text>Testicle obliteration dashboard</Text>
<Button onClick={() => alert("The bottom surgery was a success")}>Obliterate testicles</Button>
</Flex>
<>
<Heading size="9">Welcome back.</Heading>
</>
);
}

8
src/lib/components/ThemeWrapper.tsx
View file

@ -9,10 +9,12 @@ export default function ThemeWrapper({
}: {
children: React.ReactNode
}) {
const [dark, setDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
const [dark, setDark] = useState(true);
// Automatically respond to theme changes
useEffect(() => {
setDark(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
const onThemeChange = (event: MediaQueryListEvent) => {
setDark(event.matches);
};
@ -21,11 +23,11 @@ export default function ThemeWrapper({
match.addEventListener('change', onThemeChange);
return () => match.removeEventListener('change', onThemeChange);
});
}, []);
return <Theme
accentColor='ruby'
grayColor='mauve'
grayColor='slate'
radius='large'
scaling='95%'
appearance={dark ? 'dark' : 'light'}