Modified Theme Selector
This commit is contained in:
parent
d64801d386
commit
12d154832a
1 changed files with 57 additions and 22 deletions
|
@ -1,47 +1,82 @@
|
|||
import { useUpdateTheme } from "../pages/_app";
|
||||
import { useContext } from 'react';
|
||||
import { ThemeContext, DefaultTheme } from "styled-components";
|
||||
import { darkTheme, amoledTheme, lightTheme } from './themes';
|
||||
import { Fragment, useContext, useState } from 'react';
|
||||
import { ThemeContext, DefaultTheme } from "styled-components";
|
||||
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
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue