52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
|
import { useUpdateTheme } from "../pages/_app";
|
||
|
|
import { useContext } from 'react';
|
||
|
|
import { ThemeContext, DefaultTheme } from "styled-components";
|
||
|
|
import { darkTheme, amoledTheme, lightTheme } from './themes';
|
||
|
|
|
||
|
|
const StyleSelector = () => {
|
||
|
|
const updateTheme = useUpdateTheme();
|
||
|
|
const currentTheme = useContext(ThemeContext);
|
||
|
|
|
||
|
|
//console.log(currentTheme); // DEBUG
|
||
|
|
|
||
|
|
let newTheme: DefaultTheme;
|
||
|
|
switch(currentTheme.themeId) {
|
||
|
|
case 1:
|
||
|
|
newTheme = darkTheme;
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
newTheme = amoledTheme;
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
newTheme = lightTheme;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
newTheme = currentTheme;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button onClick={() => updateTheme(newTheme)}>Switch Style</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function getTheme(themeId: number): DefaultTheme {
|
||
|
|
let theme: DefaultTheme;
|
||
|
|
|
||
|
|
switch(themeId) {
|
||
|
|
case 1:
|
||
|
|
theme = lightTheme;
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
theme = darkTheme;
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
theme = amoledTheme;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
theme = darkTheme
|
||
|
|
}
|
||
|
|
|
||
|
|
return theme;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default StyleSelector;
|