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
}) {
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>
</html>
)

6
src/app/page.tsx
View File

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

2
tailwind.config.ts
View File

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