From a2058d56d57f4b7d50ec2545e873f7fa9dedb4a1 Mon Sep 17 00:00:00 2001 From: datalore Date: Fri, 3 Nov 2023 12:56:03 +0100 Subject: [PATCH] Implemented ThemeSwitcher --- src/app/components/themeswitcher.tsx | 19 +++++++++++++++++++ src/app/layout.tsx | 2 +- src/app/page.tsx | 6 ++---- tailwind.config.ts | 2 +- 4 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 src/app/components/themeswitcher.tsx diff --git a/src/app/components/themeswitcher.tsx b/src/app/components/themeswitcher.tsx new file mode 100644 index 0000000..993d287 --- /dev/null +++ b/src/app/components/themeswitcher.tsx @@ -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( + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index cbbcaab..ec741ed 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,7 +15,7 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - + {children} ) diff --git a/src/app/page.tsx b/src/app/page.tsx index d24aeb7..d421b6a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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(){
  • Theme - +
    • diff --git a/tailwind.config.ts b/tailwind.config.ts index d0878a7..ae466fe 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,7 +7,7 @@ const config: Config = { }, plugins: [require("daisyui")], daisyui: { - themes: ["synthwave"] + themes: ["light", "dark", "synthwave", "cyberpunk", "valentine"] } };