Resorted themes and added icon for dark themes

This commit is contained in:
datalore 2023-11-16 02:59:51 +01:00
parent 6a9b3e2af9
commit f100d1afa9
3 changed files with 12 additions and 5 deletions

View File

@ -1,4 +1,5 @@
This is a Buzzword Bingo generator for IT buzzwords, based on [Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/).
Icons: [Iconify](https://icon-sets.iconify.design/ic/)
## Getting Started

View File

@ -0,0 +1,5 @@
export default function DarkIcon(){
return(
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
);
}

View File

@ -1,6 +1,7 @@
"use client";
import React from 'react';
import React from "react";
import DarkIcon from "./darkicon";
export default function ThemeSwitcher(){
const [theme, setTheme] = React.useState("dark");
@ -10,14 +11,14 @@ export default function ThemeSwitcher(){
return(
<ul className="p-2 right-0 text-base-content z-10">
<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>
<li><a onClick={() => setTheme("pastel")}>Pastel</a></li>
<li><a onClick={() => setTheme("aqua")}>Aqua</a></li>
<li><a onClick={() => setTheme("coffee")}>Coffee</a></li>
<li><a onClick={() => setTheme("dim")}>Dim</a></li>
<li><a onClick={() => setTheme("dark")}><DarkIcon/>Dark</a></li>
<li><a onClick={() => setTheme("synthwave")}><DarkIcon/>Synthwave</a></li>
<li><a onClick={() => setTheme("coffee")}><DarkIcon/>Coffee</a></li>
<li><a onClick={() => setTheme("dim")}><DarkIcon/>Dim</a></li>
</ul>
);
}