From f100d1afa9a4779d5aac671db20605c647ece3d2 Mon Sep 17 00:00:00 2001
From: datalore <d4t4.l0r3@protonmail.ch>
Date: Thu, 16 Nov 2023 02:59:51 +0100
Subject: [PATCH] Resorted themes and added icon for dark themes

---
 README.md                            |  1 +
 src/app/components/darkicon.tsx      |  5 +++++
 src/app/components/themeswitcher.tsx | 11 ++++++-----
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/darkicon.tsx

diff --git a/README.md b/README.md
index f98044d..e2a0799 100644
--- a/README.md
+++ b/README.md
@@ -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
 
diff --git a/src/app/components/darkicon.tsx b/src/app/components/darkicon.tsx
new file mode 100644
index 0000000..76cb0d1
--- /dev/null
+++ b/src/app/components/darkicon.tsx
@@ -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>
+	);
+}
diff --git a/src/app/components/themeswitcher.tsx b/src/app/components/themeswitcher.tsx
index df12b99..4c7c467 100644
--- a/src/app/components/themeswitcher.tsx
+++ b/src/app/components/themeswitcher.tsx
@@ -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>
 	);
 }