27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { Context } from "../../context/context";
|
||
|
|
import { getWebTheme, webThemes } from "../../theme/themes";
|
||
|
|
|
||
|
|
const ThemeSwatches: FunctionComponent<{ context: Context }> = ({ context }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const current = getWebTheme(context.themeManager.theme);
|
||
|
|
return (
|
||
|
|
<div className="themes" role="group" aria-label={t("ChooseTheme")}>
|
||
|
|
{webThemes.map((theme) => (
|
||
|
|
<button
|
||
|
|
key={theme.id}
|
||
|
|
className={"sw" + (theme === current ? " on" : "")}
|
||
|
|
aria-label={t(theme.labelKey)}
|
||
|
|
aria-pressed={theme === current}
|
||
|
|
onClick={() => (context.themeManager.theme = theme)}>
|
||
|
|
<span style={{ background: `linear-gradient(135deg, ${theme.swatch.board} 0 50%, ${theme.swatch.accent} 50% 100%)` }} />
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ThemeSwatches;
|