Modified Theme Selector

components/themeselector.tsx

@@ -1,47 +1,82 @@
 import { useUpdateTheme } from "../pages/_app";
-import { useContext } from 'react';
+import { Fragment, useContext, useState } from 'react';
 import { ThemeContext, DefaultTheme } from "styled-components";
-import { darkTheme, amoledTheme, lightTheme } from './themes';
+import { darkTheme, amoledTheme, lightTheme, amoled2Theme } from './themes';
+import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown";
+
+const themes = [
+  lightTheme,
+  darkTheme,
+  amoledTheme,
+  amoled2Theme,
+]
 
 const StyleSelector = () => {
   const updateTheme = useUpdateTheme();
   const currentTheme = useContext(ThemeContext);
+  const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
 
-  //console.log(currentTheme); // DEBUG
+  const updateThemeWithStorage = (newTheme: DefaultTheme) => {
 
-  let newTheme: DefaultTheme;
-  switch(currentTheme.themeId) {
-    case 1:
-      newTheme = darkTheme;
-      break;
-    case 2:
-      newTheme = amoledTheme;
-      break;
-    case 3:
-      newTheme = lightTheme;
-      break;
-    default:
-      newTheme = currentTheme;
+    if (newTheme.themeId === lightTheme.themeId) {
+      updateLightTheme(newTheme);
+    }
+    else {
+      setSelectedTheme(newTheme);
+      localStorage.setItem("theme", newTheme.themeId.toString());
+      updateTheme(newTheme);
+    }
   }
 
+  const updateLightTheme = (newTheme: DefaultTheme) => {
+    if (confirm("Really switch to Light Mode?")) {
+      setSelectedTheme(newTheme);
+      localStorage.setItem("theme", newTheme.themeId.toString());
+      updateTheme(newTheme)
+    } 
+    else {
+
+    }
+  }
+
+  const [test, setTest] = useState(false);
+
   return (
-    <button onClick={() => updateTheme(newTheme)}>Switch Style</button>
+
+    <ThemeDropDown>
+      <ThemeDropDownButton onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
+      <ThemeDropDownOptions id="themesDropdown" show={test}>
+        {themes.map((theme) => (
+          <ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
+            {theme.themeName}
+          </ThemeDropDownOption>
+        ))}
+      </ThemeDropDownOptions>
+    </ThemeDropDown>
   );
 }
 
+{/* <button onClick={() => updateLightTheme(lightTheme)}>Light Style</button>
+<button onClick={() => updateThemeWithStorage(darkTheme)}>Dark Style</button>
+<button onClick={() => updateThemeWithStorage(amoledTheme)}>Amoled Style</button>
+<button onClick={() => updateThemeWithStorage(amoled2Theme)}>Amoled 2 Style</button> */}
+
 export function getTheme(themeId: number): DefaultTheme {
   let theme: DefaultTheme;
 
-  switch(themeId) {
-    case 1:
+  switch (themeId) {
+    case 0:
       theme = lightTheme;
       break;
-    case 2:
+    case 1:
       theme = darkTheme;
       break;
-    case 3:
+    case 2:
       theme = amoledTheme;
       break;
+    case 3:
+      theme = amoled2Theme;
+      break;
     default:
       theme = darkTheme
   }