Modified Theme Selector

This commit is contained in:
Neshura 2022-12-15 21:23:54 +01:00
parent d64801d386
commit 12d154832a
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A

View file

@ -1,47 +1,82 @@
import { useUpdateTheme } from "../pages/_app"; import { useUpdateTheme } from "../pages/_app";
import { useContext } from 'react'; import { Fragment, useContext, useState } from 'react';
import { ThemeContext, DefaultTheme } from "styled-components"; 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 StyleSelector = () => {
const updateTheme = useUpdateTheme(); const updateTheme = useUpdateTheme();
const currentTheme = useContext(ThemeContext); const currentTheme = useContext(ThemeContext);
const [selectedTheme, setSelectedTheme] = useState(themes[currentTheme.themeId]);
//console.log(currentTheme); // DEBUG const updateThemeWithStorage = (newTheme: DefaultTheme) => {
let newTheme: DefaultTheme; if (newTheme.themeId === lightTheme.themeId) {
switch(currentTheme.themeId) { updateLightTheme(newTheme);
case 1: }
newTheme = darkTheme; else {
break; setSelectedTheme(newTheme);
case 2: localStorage.setItem("theme", newTheme.themeId.toString());
newTheme = amoledTheme; updateTheme(newTheme);
break; }
case 3:
newTheme = lightTheme;
break;
default:
newTheme = currentTheme;
} }
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 ( 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 { export function getTheme(themeId: number): DefaultTheme {
let theme: DefaultTheme; let theme: DefaultTheme;
switch(themeId) { switch (themeId) {
case 1: case 0:
theme = lightTheme; theme = lightTheme;
break; break;
case 2: case 1:
theme = darkTheme; theme = darkTheme;
break; break;
case 3: case 2:
theme = amoledTheme; theme = amoledTheme;
break; break;
case 3:
theme = amoled2Theme;
break;
default: default:
theme = darkTheme theme = darkTheme
} }