From d1dc7ceca7285b835d4641b9561d4d04a17ef30a Mon Sep 17 00:00:00 2001 From: Neshura Date: Sun, 18 Dec 2022 00:40:24 +0100 Subject: [PATCH] Updated Theme Selector for use with dynamic themes --- components/themeselector.tsx | 54 ++++++++++-------------------------- 1 file changed, 15 insertions(+), 39 deletions(-) diff --git a/components/themeselector.tsx b/components/themeselector.tsx index 8db0066..f395038 100644 --- a/components/themeselector.tsx +++ b/components/themeselector.tsx @@ -1,17 +1,12 @@ import { useUpdateTheme } from "../pages/_app"; -import { Fragment, useContext, useState } from 'react'; +import { useContext, useState } from 'react'; import { ThemeContext, DefaultTheme } from "styled-components"; -import { darkTheme, amoledTheme, lightTheme, amoled2Theme } from './themes'; +import { darkTheme, lightTheme } from './themes'; import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown"; - -const themes = [ - lightTheme, - darkTheme, - amoledTheme, - amoled2Theme, -] +import Themes from '../public/data/themes.json'; export const StyleSelector = () => { + const themes = Themes.themes; const updateTheme = useUpdateTheme(); const currentTheme = useContext(ThemeContext); const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]); @@ -21,7 +16,6 @@ export const StyleSelector = () => { } const updateThemeWithStorage = (newTheme: DefaultTheme) => { - if (newTheme.themeId === lightTheme.themeId) { updateLightTheme(newTheme); } @@ -38,27 +32,22 @@ export const StyleSelector = () => { localStorage.setItem("theme", newTheme.themeId.toString()); updateTheme(newTheme) } - else { - - } } - const [test, setTest] = useState(false); + const [visible, setVisible] = useState(false); function handleBlur(event:any) { - console.log(event) if (!event.currentTarget.contains(event.relatedTarget)) { - setTest(false); + setVisible(false); } } return ( - handleBlur(event)}> - setTest(test => !test)}>{selectedTheme.themeName} - + setVisible(visible => !visible)}>{selectedTheme.themeName} + {themes.map((theme) => ( - updateThemeWithStorage(theme)}> + updateThemeWithStorage(theme)}> {theme.themeName} ))} @@ -73,27 +62,14 @@ export const StyleSelectorPlaceholder = () => { ) } -export function getTheme(themeId: number): DefaultTheme { - let theme: DefaultTheme; +export function getTheme(themeId: number, themes: DefaultTheme[]): DefaultTheme { + let retTheme: DefaultTheme = darkTheme; - switch (themeId) { - case 0: - theme = lightTheme; - break; - case 1: - theme = darkTheme; - break; - case 2: - theme = amoledTheme; - break; - case 3: - theme = amoled2Theme; - break; - default: - theme = darkTheme - } + themes.forEach((theme) => { + if (theme.themeId === themeId) { retTheme = theme}; + }) - return theme; + return retTheme; } export default StyleSelector; \ No newline at end of file