forked from NotNet/gluestick
add some color values + remove ones i can't find lol
This commit is contained in:
parent
d6f21728da
commit
e8afec54b5
|
@ -1,4 +1,4 @@
|
|||
.color-changer {
|
||||
.colorChanger {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
@ -9,6 +9,6 @@
|
|||
transition: opacity 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.color-changer:hover {
|
||||
.colorChanger:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@ type ColorScheme = {
|
|||
|
||||
const colors: ColorScheme[] = [
|
||||
{
|
||||
// https://monokai.pro
|
||||
name: "Monokai Pro",
|
||||
bg: "#2d2a2e",
|
||||
bgDark: "#403e41",
|
||||
|
@ -32,46 +33,46 @@ const colors: ColorScheme[] = [
|
|||
warning: "#ffd866"
|
||||
},
|
||||
{
|
||||
// https://github.com/morhetz/gruvbox
|
||||
name: "Gruvbox Dark",
|
||||
bg: "#282828",
|
||||
bgDark: "#3c3836",
|
||||
bgDarker: "#1d2021",
|
||||
fg: "#ebdbb2",
|
||||
fgDark: "#a89984"
|
||||
fgDark: "#a89984",
|
||||
fgDarker: "#928374",
|
||||
error: "#fb4934",
|
||||
warning: "#fabd2f"
|
||||
},
|
||||
{
|
||||
name: "Amora",
|
||||
// https://github.com/owozsh/amora
|
||||
name: "Amora Focus",
|
||||
bg: "#1a1a1a",
|
||||
bgDark: "#171717",
|
||||
bgDarker: "#141414",
|
||||
fg: "#DEDBEB",
|
||||
fgDark: "#5c5c5c"
|
||||
},
|
||||
{
|
||||
name: "Amora Focus",
|
||||
bg: "#302838",
|
||||
bgDark: "#2a2331",
|
||||
fg: "#dedbeb",
|
||||
fgDark: "#5c5c5c"
|
||||
fgDark: "#5c5c5c",
|
||||
fgDarker: "#292929"
|
||||
},
|
||||
{
|
||||
// https://rosepinetheme.com/palette
|
||||
name: "Rosé Pine",
|
||||
bg: "#191724",
|
||||
bgDark: "#26233a",
|
||||
bgDarker: "#1f1d2e",
|
||||
fg: "#e0def4",
|
||||
fgDark: "#908caa"
|
||||
},
|
||||
{
|
||||
name: "Rosé Pine Moon",
|
||||
bg: "#232136",
|
||||
bgDark: "#393552",
|
||||
fg: "#e0def4",
|
||||
fgDark: "#908caa"
|
||||
fgDark: "#908caa",
|
||||
fgDarker: "#6e6a86"
|
||||
},
|
||||
{
|
||||
// https://www.nordtheme.com/docs/colors-and-palettes
|
||||
name: "Nord",
|
||||
bg: "#2e3440",
|
||||
bgDark: "#3b4252",
|
||||
bgDarker: "#2E3440",
|
||||
fg: "#eceff4",
|
||||
fgDark: "#d8dee9"
|
||||
fgDark: "#d8dee9",
|
||||
fgDarker: "#E5E9F0"
|
||||
},
|
||||
{
|
||||
name: "lovelace",
|
||||
|
@ -112,8 +113,36 @@ const colors: ColorScheme[] = [
|
|||
|
||||
const fallback = colors[0];
|
||||
|
||||
function getFromLocalStorage() {
|
||||
let color = localStorage.getItem("colorscheme");
|
||||
if (!color) localStorage.setItem("colorscheme", fallback.name);
|
||||
return color ?? fallback.name;
|
||||
}
|
||||
|
||||
function set(colorScheme: ColorScheme) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
export default function ColorChanger() {
|
||||
const [current, setCurrent] = React.useState<string>("Monokai Pro");
|
||||
const [current, setCurrent] = React.useState<string>(fallback.name);
|
||||
|
||||
// this is a FOUC, but it's fine, right? right?
|
||||
React.useEffect(() => {
|
||||
const color = getFromLocalStorage();
|
||||
setCurrent(color);
|
||||
set(colors.find((x) => x.name === color)!);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Image
|
||||
|
@ -127,22 +156,11 @@ export default function ColorChanger() {
|
|||
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);
|
||||
}
|
||||
|
||||
set(colorScheme);
|
||||
setCurrent(colorScheme.name);
|
||||
localStorage.setItem("colorscheme", colorScheme.name);
|
||||
}}
|
||||
className={styles["color-changer"]}
|
||||
className={styles["colorChanger"]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue