mirror of
https://github.com/gabehf/Koito.git
synced 2026-03-12 00:40:56 -07:00
cd31b6f2d8
* Fix race condition with using getComputedStyle primary color for dynamic activity grid darkening Instead just use the color from the current theme directly. Tested works on initial load and theme changes. Fixes https://github.com/gabehf/Koito/issues/75 * Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name Split name out of the Theme struct to simplify custom theme saving/reading
23 lines
No EOL
978 B
TypeScript
23 lines
No EOL
978 B
TypeScript
import type { Theme } from "~/styles/themes.css";
|
|
|
|
interface Props {
|
|
theme: Theme
|
|
themeName: string
|
|
setTheme: Function
|
|
}
|
|
|
|
export default function ThemeOption({ theme, themeName, setTheme }: Props) {
|
|
|
|
const capitalizeFirstLetter = (s: string) => {
|
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
}
|
|
|
|
return (
|
|
<div onClick={() => setTheme(themeName)} className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}>
|
|
<div className="text-xs sm:text-sm">{capitalizeFirstLetter(themeName)}</div>
|
|
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.bgSecondary}}></div>
|
|
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.fgSecondary}}></div>
|
|
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.primary}}></div>
|
|
</div>
|
|
)
|
|
} |