forked from NotNet/gluestick
148 lines
2.8 KiB
TypeScript
148 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import styles from "./ColorChanger.module.css";
|
|
import Image from "next/image";
|
|
|
|
type ColorScheme = {
|
|
name: string;
|
|
|
|
bg: string;
|
|
bgDark: string;
|
|
bgDarker?: string;
|
|
|
|
fg: string;
|
|
fgDark: string;
|
|
fgDarker?: string;
|
|
|
|
error?: string;
|
|
warning?: string;
|
|
};
|
|
|
|
const colors: ColorScheme[] = [
|
|
{
|
|
name: "Monokai Pro",
|
|
bg: "#2d2a2e",
|
|
bgDark: "#403e41",
|
|
bgDarker: "#221f22",
|
|
fg: "#fcfcfa",
|
|
fgDark: "#727072",
|
|
fgDarker: "#5b595c",
|
|
error: "#ff6188",
|
|
warning: "#ffd866"
|
|
},
|
|
{
|
|
name: "Gruvbox Dark",
|
|
bg: "#282828",
|
|
bgDark: "#3c3836",
|
|
fg: "#ebdbb2",
|
|
fgDark: "#a89984"
|
|
},
|
|
{
|
|
name: "Amora",
|
|
bg: "#1a1a1a",
|
|
bgDark: "#171717",
|
|
fg: "#DEDBEB",
|
|
fgDark: "#5c5c5c"
|
|
},
|
|
{
|
|
name: "Amora Focus",
|
|
bg: "#302838",
|
|
bgDark: "#2a2331",
|
|
fg: "#dedbeb",
|
|
fgDark: "#5c5c5c"
|
|
},
|
|
{
|
|
name: "Rosé Pine",
|
|
bg: "#191724",
|
|
bgDark: "#26233a",
|
|
fg: "#e0def4",
|
|
fgDark: "#908caa"
|
|
},
|
|
{
|
|
name: "Rosé Pine Moon",
|
|
bg: "#232136",
|
|
bgDark: "#393552",
|
|
fg: "#e0def4",
|
|
fgDark: "#908caa"
|
|
},
|
|
{
|
|
name: "Nord",
|
|
bg: "#2e3440",
|
|
bgDark: "#3b4252",
|
|
fg: "#eceff4",
|
|
fgDark: "#d8dee9"
|
|
},
|
|
{
|
|
name: "lovelace",
|
|
bg: "#1d1f28",
|
|
bgDark: "#282a36",
|
|
fg: "#fdfdfd",
|
|
fgDark: "#414458"
|
|
},
|
|
{
|
|
name: "skyfall",
|
|
bg: "#282f37",
|
|
bgDark: "#20262c",
|
|
fg: "#f1fcf9",
|
|
fgDark: "#465463"
|
|
},
|
|
{
|
|
name: "Catppuccin Frappe",
|
|
bg: "#303446",
|
|
bgDark: "#51576d",
|
|
fg: "#c6d0f5",
|
|
fgDark: "#a5adce"
|
|
},
|
|
{
|
|
name: "Catppuccin Macchiato",
|
|
bg: "#24273a",
|
|
bgDark: "#494d64",
|
|
fg: "#cad3f5",
|
|
fgDark: "#a5adcb"
|
|
},
|
|
{
|
|
name: "Catppuccin Mocha",
|
|
bg: "#1e1e2e",
|
|
bgDark: "#45475a",
|
|
fg: "#cdd6f4",
|
|
fgDark: "#a6adc8"
|
|
}
|
|
];
|
|
|
|
const fallback = colors[0];
|
|
|
|
export default function ColorChanger() {
|
|
const [current, setCurrent] = React.useState<string>("Monokai Pro");
|
|
|
|
return (
|
|
<Image
|
|
src="/paint.svg"
|
|
width="64"
|
|
height="64"
|
|
alt="paint"
|
|
title={current}
|
|
onClick={() => {
|
|
const pool = colors.filter((x) => x.name !== current);
|
|
const idx = Math.floor(Math.random() * pool.length);
|
|
const colorScheme = pool[idx];
|
|
|
|
const fixedColors = {
|
|
"--bg": colorScheme.bg,
|
|
"--bg-dark": colorScheme.bgDark,
|
|
"--fg": colorScheme.fg,
|
|
"--fg-dark": colorScheme.fgDark,
|
|
"--error": colorScheme.error ?? fallback.error!,
|
|
"--warning": colorScheme.warning ?? fallback.warning!
|
|
};
|
|
|
|
for (const [k, v] of Object.entries(fixedColors)) {
|
|
document.documentElement.style.setProperty(k, v);
|
|
}
|
|
|
|
setCurrent(colorScheme.name);
|
|
}}
|
|
className={styles["color-changer"]}
|
|
/>
|
|
);
|
|
}
|