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

9
src/app/page.tsx
View file

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

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

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