From e8afec54b57463f2fc30cf9c98cec424b1a03973 Mon Sep 17 00:00:00 2001 From: NotNite Date: Wed, 26 Apr 2023 14:51:47 -0400 Subject: [PATCH] add some color values + remove ones i can't find lol --- src/components/ColorChanger.module.css | 4 +- src/components/ColorChanger.tsx | 86 ++++++++++++++++---------- 2 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/components/ColorChanger.module.css b/src/components/ColorChanger.module.css index 2ee1f35..2fb4877 100644 --- a/src/components/ColorChanger.module.css +++ b/src/components/ColorChanger.module.css @@ -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%; } diff --git a/src/components/ColorChanger.tsx b/src/components/ColorChanger.tsx index 33c6db3..ae37a1b 100644 --- a/src/components/ColorChanger.tsx +++ b/src/components/ColorChanger.tsx @@ -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("Monokai Pro"); + const [current, setCurrent] = React.useState(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 ( ); }