main-site/components/themeselector.tsx

52 lines
1.1 KiB
TypeScript
Raw Normal View History

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;