datalore/buzzword-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Implemented ThemeSwitcher

Browse Source
This commit is contained in:
datalore 2023-11-03 12:56:03 +01:00
parent 596c180d9d
commit a2058d56d5
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/themeswitcher.tsx Normal file
View File

@ -0,0 +1,19 @@
"use client";
import React from 'react';
export default function ThemeSwitcher(){
const [theme, setTheme] = React.useState("dark");
React.useEffect(() => {document.body.setAttribute("data-theme", theme)});
return(
<ul className="p-2 right-0 text-base-content">
<li><a onClick={() => setTheme("light")}>Light</a></li>
<li><a onClick={() => setTheme("dark")}>Dark</a></li>
<li><a onClick={() => setTheme("synthwave")}>Synthwave</a></li>
<li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li>
<li><a onClick={() => setTheme("valentine")}>Valentine</a></li>
</ul>
);
}

2
src/app/layout.tsx
View File

@ -15,7 +15,7 @@ export default function RootLayout({
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="en" data-theme="winter"> <html lang="en" data-theme="dark">
<body className="bg-base-100 base-content flex flex-col h-screen">{children}</body> <body className="bg-base-100 base-content flex flex-col h-screen">{children}</body>
</html> </html>
) )

6
src/app/page.tsx
View File

@ -1,4 +1,5 @@
import BingoController from './components/bingocontroller.tsx' import BingoController from './components/bingocontroller.tsx'
import ThemeSwitcher from './components/themeswitcher.tsx'
export default function Home(){ export default function Home(){
return( return(
@ -15,10 +16,7 @@ export default function Home(){
<li> <li>
<details> <details>
<summary>Theme</summary> <summary>Theme</summary>
<ul> <ThemeSwitcher/>
<li><a>Theme 1</a></li>
<li><a>Theme 2</a></li>
</ul>
</details> </details>
</li> </li>
</ul> </ul>

2
tailwind.config.ts
View File

@ -7,7 +7,7 @@ const config: Config = {
}, },
plugins: [require("daisyui")], plugins: [require("daisyui")],
daisyui: { daisyui: {
themes: ["synthwave"] themes: ["light", "dark", "synthwave", "cyberpunk", "valentine"]
} }
}; };