Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Updated Theme Selector for use with dynamic themes

Browse source
This commit is contained in:
Neshura 2022-12-18 00:40:24 +01:00
parent a0264a31cb
commit d1dc7ceca7
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
1 changed files with 15 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
components/themeselector.tsx
View file

@ -1,17 +1,12 @@
import { useUpdateTheme } from "../pages/_app"; import { useUpdateTheme } from "../pages/_app";
import { Fragment, useContext, useState } from 'react'; import { useContext, useState } from 'react';
import { ThemeContext, DefaultTheme } from "styled-components"; 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"; import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown";
import Themes from '../public/data/themes.json';
const themes = [
lightTheme,
darkTheme,
amoledTheme,
amoled2Theme,
]
export const StyleSelector = () => { export const StyleSelector = () => {
const themes = Themes.themes;
const updateTheme = useUpdateTheme(); const updateTheme = useUpdateTheme();
const currentTheme = useContext(ThemeContext); const currentTheme = useContext(ThemeContext);
const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]); const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
@ -21,7 +16,6 @@ export const StyleSelector = () => {
} }
const updateThemeWithStorage = (newTheme: DefaultTheme) => { const updateThemeWithStorage = (newTheme: DefaultTheme) => {
if (newTheme.themeId === lightTheme.themeId) { if (newTheme.themeId === lightTheme.themeId) {
updateLightTheme(newTheme); updateLightTheme(newTheme);
} }
@ -38,27 +32,22 @@ export const StyleSelector = () => {
localStorage.setItem("theme", newTheme.themeId.toString()); localStorage.setItem("theme", newTheme.themeId.toString());
updateTheme(newTheme) updateTheme(newTheme)
} }
else {
}
} }
const [test, setTest] = useState(false); const [visible, setVisible] = useState(false);
function handleBlur(event:any) { function handleBlur(event:any) {
console.log(event)
if (!event.currentTarget.contains(event.relatedTarget)) { if (!event.currentTarget.contains(event.relatedTarget)) {
setTest(false); setVisible(false);
} }
} }
return ( return (
<ThemeDropDown onBlur={(event) => handleBlur(event)}> <ThemeDropDown onBlur={(event) => handleBlur(event)}>
<ThemeDropDownButton show={test} onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton> <ThemeDropDownButton show={+visible} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}</ThemeDropDownButton>
<ThemeDropDownOptions id="themesDropdown" show={test}> <ThemeDropDownOptions id="themesDropdown" show={+visible}>
{themes.map((theme) => ( {themes.map((theme) => (
<ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}> <ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
{theme.themeName} {theme.themeName}
</ThemeDropDownOption> </ThemeDropDownOption>
))} ))}
@ -73,27 +62,14 @@ export const StyleSelectorPlaceholder = () => {
) )
} }
export function getTheme(themeId: number): DefaultTheme { export function getTheme(themeId: number, themes: DefaultTheme[]): DefaultTheme {
let theme: DefaultTheme; let retTheme: DefaultTheme = darkTheme;
switch (themeId) { themes.forEach((theme) => {
case 0: if (theme.themeId === themeId) { retTheme = theme};
theme = lightTheme; })
break;
case 1:
theme = darkTheme;
break;
case 2:
theme = amoledTheme;
break;
case 3:
theme = amoled2Theme;
break;
default:
theme = darkTheme
}
return theme; return retTheme;
} }
export default StyleSelector; export default StyleSelector;