79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
|
import React from "react";
|
||
|
import { useThemeContext, emptyPalette } from "components/Theme";
|
||
|
import { Input } from "components/Input";
|
||
|
import { Button } from "components/Button";
|
||
|
|
||
|
import styles from "./themer.module.css";
|
||
|
|
||
|
export default function Themer() {
|
||
|
const context = useThemeContext();
|
||
|
const palette = context?.theme.palette ?? emptyPalette;
|
||
|
|
||
|
return (
|
||
|
<main className={styles.page}>
|
||
|
<h1>Themer</h1>
|
||
|
<form onSubmit={(event) => event.preventDefault()}>
|
||
|
<div className={styles.controls}>
|
||
|
<Button
|
||
|
type="reset"
|
||
|
onClick={() => {
|
||
|
context?.clearSaved();
|
||
|
context?.setTheme("light");
|
||
|
}}
|
||
|
>
|
||
|
Reset to light mode
|
||
|
</Button>
|
||
|
<Button type="submit" onClick={() => context?.save()}>
|
||
|
Save
|
||
|
</Button>
|
||
|
</div>
|
||
|
<div className={styles.palette}>
|
||
|
{Object.entries(palette).map(([key, value]) => {
|
||
|
const color =
|
||
|
value.length === 4 && value.startsWith("#")
|
||
|
? `#${value[1].repeat(2)}${value[2].repeat(2)}${value[3].repeat(
|
||
|
2
|
||
|
)}`
|
||
|
: value;
|
||
|
|
||
|
const isValidColor = color.startsWith("#") && color.length === 7;
|
||
|
|
||
|
return (
|
||
|
<div key={key}>
|
||
|
<Input
|
||
|
id={`color-${key}`}
|
||
|
type="color"
|
||
|
className={styles.colorSelector}
|
||
|
value={color}
|
||
|
onChange={(event) =>
|
||
|
context?.setTheme({ [key]: event.target.value })
|
||
|
}
|
||
|
/>
|
||
|
<Button
|
||
|
type="button"
|
||
|
className={styles.colorReset}
|
||
|
size="small"
|
||
|
onClick={() => context?.setTheme({ [key]: "" })}
|
||
|
>
|
||
|
Reset
|
||
|
</Button>
|
||
|
<code className={styles.colorName}>
|
||
|
<label htmlFor={`color-${key}`}>
|
||
|
{!isValidColor && "🚧 "}
|
||
|
{key
|
||
|
.slice(2)
|
||
|
.split("-")
|
||
|
.map((word) => word[0].toUpperCase() + word.slice(1))
|
||
|
.join(" ")}
|
||
|
{!isValidColor && " 🚧"}
|
||
|
</label>
|
||
|
</code>
|
||
|
</div>
|
||
|
);
|
||
|
})}
|
||
|
</div>{" "}
|
||
|
</form>
|
||
|
</main>
|
||
|
);
|
||
|
}
|