From 3f5402f2769328d8eb00f1fb6bb43b4d84d168a3 Mon Sep 17 00:00:00 2001 From: lucy Date: Wed, 30 Sep 2026 14:36:55 +0200 Subject: [PATCH] use stylix theme for discord --- build/base16-0x96f.css | 523 ++++++++++++++++-- build/base16-3024.css | 523 ++++++++++++++++-- build/base16-apathy.css | 523 ++++++++++++++++-- build/base16-apprentice.css | 523 ++++++++++++++++-- build/base16-arroz-con-dulce-dark.css | 523 ++++++++++++++++-- build/base16-arroz-con-dulce.css | 523 ++++++++++++++++-- build/base16-ascendancy.css | 523 ++++++++++++++++-- build/base16-ashes.css | 523 ++++++++++++++++-- build/base16-atelier-cave-light.css | 523 ++++++++++++++++-- build/base16-atelier-cave.css | 523 ++++++++++++++++-- build/base16-atelier-dune-light.css | 523 ++++++++++++++++-- build/base16-atelier-dune.css | 523 ++++++++++++++++-- build/base16-atelier-estuary-light.css | 523 ++++++++++++++++-- build/base16-atelier-estuary.css | 523 ++++++++++++++++-- build/base16-atelier-forest-light.css | 523 ++++++++++++++++-- build/base16-atelier-forest.css | 523 ++++++++++++++++-- build/base16-atelier-heath-light.css | 523 ++++++++++++++++-- build/base16-atelier-heath.css | 523 ++++++++++++++++-- build/base16-atelier-lakeside-light.css | 523 ++++++++++++++++-- build/base16-atelier-lakeside.css | 523 ++++++++++++++++-- build/base16-atelier-plateau-light.css | 523 ++++++++++++++++-- build/base16-atelier-plateau.css | 523 ++++++++++++++++-- build/base16-atelier-savanna-light.css | 523 ++++++++++++++++-- build/base16-atelier-savanna.css | 523 ++++++++++++++++-- build/base16-atelier-seaside-light.css | 523 ++++++++++++++++-- build/base16-atelier-seaside.css | 523 ++++++++++++++++-- build/base16-atelier-sulphurpool-light.css | 523 ++++++++++++++++-- build/base16-atelier-sulphurpool.css | 523 ++++++++++++++++-- build/base16-atlas.css | 523 ++++++++++++++++-- build/base16-ayu-dark.css | 523 ++++++++++++++++-- build/base16-ayu-light.css | 523 ++++++++++++++++-- build/base16-ayu-mirage.css | 523 ++++++++++++++++-- build/base16-aztec.css | 523 ++++++++++++++++-- build/base16-bespin.css | 523 ++++++++++++++++-- build/base16-black-metal-bathory.css | 523 ++++++++++++++++-- build/base16-black-metal-burzum.css | 523 ++++++++++++++++-- build/base16-black-metal-dark-funeral.css | 523 ++++++++++++++++-- build/base16-black-metal-gorgoroth.css | 523 ++++++++++++++++-- build/base16-black-metal-immortal.css | 523 ++++++++++++++++-- build/base16-black-metal-khold.css | 523 ++++++++++++++++-- build/base16-black-metal-marduk.css | 523 ++++++++++++++++-- build/base16-black-metal-mayhem.css | 523 ++++++++++++++++-- build/base16-black-metal-nile.css | 523 ++++++++++++++++-- build/base16-black-metal-venom.css | 523 ++++++++++++++++-- build/base16-black-metal.css | 523 ++++++++++++++++-- build/base16-blueforest.css | 523 ++++++++++++++++-- build/base16-blueish.css | 523 ++++++++++++++++-- build/base16-boo-shnickle-light.css | 523 ++++++++++++++++-- build/base16-boo-shnickle.css | 523 ++++++++++++++++-- build/base16-bosque.css | 523 ++++++++++++++++-- build/base16-brasa.css | 523 ++++++++++++++++-- build/base16-brewer.css | 523 ++++++++++++++++-- build/base16-bright.css | 523 ++++++++++++++++-- build/base16-brogrammer.css | 523 ++++++++++++++++-- build/base16-brushtrees-dark.css | 523 ++++++++++++++++-- build/base16-brushtrees.css | 523 ++++++++++++++++-- build/base16-cacao.css | 523 ++++++++++++++++-- build/base16-caroline.css | 523 ++++++++++++++++-- build/base16-catppuccin-frappe.css | 523 ++++++++++++++++-- build/base16-catppuccin-latte.css | 523 ++++++++++++++++-- build/base16-catppuccin-macchiato.css | 523 ++++++++++++++++-- build/base16-catppuccin-mocha.css | 523 ++++++++++++++++-- build/base16-cerulean-signal-dark.css | 523 ++++++++++++++++-- build/base16-cerulean-signal-light.css | 523 ++++++++++++++++-- build/base16-chalk.css | 523 ++++++++++++++++-- build/base16-charcoal-dark.css | 523 ++++++++++++++++-- build/base16-charcoal-light.css | 523 ++++++++++++++++-- build/base16-chicago-day.css | 523 ++++++++++++++++-- build/base16-chicago-night.css | 523 ++++++++++++++++-- build/base16-chinoiserie-midnight.css | 523 ++++++++++++++++-- build/base16-chinoiserie-morandi.css | 523 ++++++++++++++++-- build/base16-chinoiserie-night.css | 523 ++++++++++++++++-- build/base16-chinoiserie.css | 523 ++++++++++++++++-- build/base16-circus.css | 523 ++++++++++++++++-- build/base16-classic-dark.css | 523 ++++++++++++++++-- build/base16-classic-light.css | 523 ++++++++++++++++-- build/base16-codeschool.css | 523 ++++++++++++++++-- build/base16-colors.css | 523 ++++++++++++++++-- build/base16-corduroy-dark.css | 475 ++++++++++++++++ build/base16-corduroy.css | 475 ++++++++++++++++ build/base16-cupcake.css | 523 ++++++++++++++++-- build/base16-cupertino.css | 523 ++++++++++++++++-- build/base16-cyberpunk.css | 523 ++++++++++++++++-- build/base16-da-one-black.css | 523 ++++++++++++++++-- build/base16-da-one-gray.css | 523 ++++++++++++++++-- build/base16-da-one-ocean.css | 523 ++++++++++++++++-- build/base16-da-one-paper.css | 523 ++++++++++++++++-- build/base16-da-one-sea.css | 523 ++++++++++++++++-- build/base16-da-one-white.css | 523 ++++++++++++++++-- build/base16-danqing-light.css | 523 ++++++++++++++++-- build/base16-danqing.css | 523 ++++++++++++++++-- build/base16-darcula.css | 523 ++++++++++++++++-- build/base16-darkmoss.css | 523 ++++++++++++++++-- build/base16-darktooth.css | 523 ++++++++++++++++-- build/base16-darkviolet.css | 523 ++++++++++++++++-- build/base16-decaf.css | 523 ++++++++++++++++-- build/base16-deep-oceanic-next.css | 523 ++++++++++++++++-- build/base16-default-dark.css | 523 ++++++++++++++++-- build/base16-default-light.css | 523 ++++++++++++++++-- build/base16-digital-rain.css | 523 ++++++++++++++++-- build/base16-dirtysea.css | 523 ++++++++++++++++-- build/base16-dracula.css | 523 ++++++++++++++++-- build/base16-edge-dark.css | 523 ++++++++++++++++-- build/base16-edge-light.css | 523 ++++++++++++++++-- build/base16-eighties.css | 523 ++++++++++++++++-- build/base16-eldritch.css | 523 ++++++++++++++++-- build/base16-embers-light.css | 523 ++++++++++++++++-- build/base16-embers.css | 523 ++++++++++++++++-- build/base16-emil.css | 523 ++++++++++++++++-- build/base16-equilibrium-dark.css | 523 ++++++++++++++++-- build/base16-equilibrium-gray-dark.css | 523 ++++++++++++++++-- build/base16-equilibrium-gray-light.css | 523 ++++++++++++++++-- build/base16-equilibrium-light.css | 523 ++++++++++++++++-- build/base16-eris.css | 523 ++++++++++++++++-- build/base16-espresso.css | 523 ++++++++++++++++-- build/base16-eva-dim.css | 523 ++++++++++++++++-- build/base16-eva.css | 523 ++++++++++++++++-- build/base16-evenok-dark.css | 523 ++++++++++++++++-- build/base16-everforest-dark-hard.css | 523 ++++++++++++++++-- build/base16-everforest-dark-medium.css | 523 ++++++++++++++++-- build/base16-everforest-dark-soft.css | 523 ++++++++++++++++-- build/base16-everforest-light-hard.css | 523 ++++++++++++++++-- build/base16-everforest-light-medium.css | 523 ++++++++++++++++-- build/base16-everforest-light-soft.css | 523 ++++++++++++++++-- build/base16-everforest.css | 523 ++++++++++++++++-- build/base16-flat.css | 523 ++++++++++++++++-- build/base16-flexoki-dark.css | 523 ++++++++++++++++-- build/base16-flexoki-light.css | 523 ++++++++++++++++-- build/base16-framer.css | 523 ++++++++++++++++-- build/base16-fruit-soda.css | 523 ++++++++++++++++-- build/base16-gigavolt.css | 523 ++++++++++++++++-- build/base16-github-dark-colorblind.css | 523 ++++++++++++++++-- build/base16-github-dark-dimmed.css | 523 ++++++++++++++++-- build/base16-github-dark-high-contrast.css | 523 ++++++++++++++++-- build/base16-github-dark.css | 523 ++++++++++++++++-- build/base16-github-light-colorblind.css | 523 ++++++++++++++++-- build/base16-github-light-high-contrast.css | 523 ++++++++++++++++-- build/base16-github.css | 523 ++++++++++++++++-- build/base16-google-dark.css | 523 ++++++++++++++++-- build/base16-google-light.css | 523 ++++++++++++++++-- build/base16-gotham.css | 523 ++++++++++++++++-- build/base16-grayscale-dark.css | 523 ++++++++++++++++-- build/base16-grayscale-light.css | 523 ++++++++++++++++-- build/base16-greenscreen.css | 523 ++++++++++++++++-- build/base16-gruber.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark-hard.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark-medium-forest.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark-medium.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark-pale.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark-soft.css | 523 ++++++++++++++++-- build/base16-gruvbox-dark.css | 523 ++++++++++++++++-- build/base16-gruvbox-light-hard.css | 523 ++++++++++++++++-- build/base16-gruvbox-light-medium.css | 523 ++++++++++++++++-- build/base16-gruvbox-light-soft.css | 523 ++++++++++++++++-- build/base16-gruvbox-light.css | 523 ++++++++++++++++-- build/base16-gruvbox-material-dark-hard.css | 523 ++++++++++++++++-- build/base16-gruvbox-material-dark-medium.css | 523 ++++++++++++++++-- build/base16-gruvbox-material-dark-soft.css | 523 ++++++++++++++++-- build/base16-gruvbox-material-light-hard.css | 523 ++++++++++++++++-- .../base16-gruvbox-material-light-medium.css | 523 ++++++++++++++++-- build/base16-gruvbox-material-light-soft.css | 523 ++++++++++++++++-- build/base16-hardcore.css | 523 ++++++++++++++++-- build/base16-hardhacker.css | 523 ++++++++++++++++-- build/base16-harmonic16-dark.css | 523 ++++++++++++++++-- build/base16-harmonic16-light.css | 523 ++++++++++++++++-- build/base16-heetch-light.css | 523 ++++++++++++++++-- build/base16-heetch.css | 523 ++++++++++++++++-- build/base16-helios.css | 523 ++++++++++++++++-- build/base16-hopscotch.css | 523 ++++++++++++++++-- build/base16-horizon-dark.css | 523 ++++++++++++++++-- build/base16-horizon-light.css | 523 ++++++++++++++++-- build/base16-horizon-terminal-dark.css | 523 ++++++++++++++++-- build/base16-horizon-terminal-light.css | 523 ++++++++++++++++-- build/base16-humanoid-dark.css | 523 ++++++++++++++++-- build/base16-humanoid-light.css | 523 ++++++++++++++++-- build/base16-ia-dark.css | 523 ++++++++++++++++-- build/base16-ia-light.css | 523 ++++++++++++++++-- build/base16-icy.css | 523 ++++++++++++++++-- build/base16-irblack.css | 523 ++++++++++++++++-- build/base16-isotope.css | 523 ++++++++++++++++-- build/base16-jabuti.css | 523 ++++++++++++++++-- build/base16-jellybeans.css | 523 ++++++++++++++++-- build/base16-kanagawa-dragon.css | 523 ++++++++++++++++-- build/base16-kanagawa.css | 523 ++++++++++++++++-- build/base16-katy.css | 523 ++++++++++++++++-- build/base16-kimber.css | 523 ++++++++++++++++-- build/base16-kissa-latte.css | 523 ++++++++++++++++-- build/base16-kissa-macchiato.css | 523 ++++++++++++++++-- build/base16-lichen-chartreuse-dark.css | 523 ++++++++++++++++-- build/base16-lichen-chartreuse-light.css | 523 ++++++++++++++++-- build/base16-lime.css | 523 ++++++++++++++++-- build/base16-linux-vt.css | 523 ++++++++++++++++-- build/base16-macintosh.css | 523 ++++++++++++++++-- build/base16-marrakesh.css | 523 ++++++++++++++++-- build/base16-materia.css | 523 ++++++++++++++++-- build/base16-material-darker.css | 523 ++++++++++++++++-- build/base16-material-lighter.css | 523 ++++++++++++++++-- build/base16-material-palenight.css | 523 ++++++++++++++++-- build/base16-material-vivid.css | 523 ++++++++++++++++-- build/base16-material.css | 523 ++++++++++++++++-- build/base16-measured-dark.css | 523 ++++++++++++++++-- build/base16-measured-light.css | 523 ++++++++++++++++-- build/base16-mellow-purple.css | 523 ++++++++++++++++-- build/base16-mexico-light.css | 523 ++++++++++++++++-- build/base16-mezcal.css | 523 ++++++++++++++++-- build/base16-mocha.css | 523 ++++++++++++++++-- build/base16-monokai.css | 523 ++++++++++++++++-- build/base16-moonlight.css | 523 ++++++++++++++++-- build/base16-mountain.css | 523 ++++++++++++++++-- build/base16-nebula.css | 523 ++++++++++++++++-- build/base16-neovim-dark.css | 523 ++++++++++++++++-- build/base16-neovim-light.css | 523 ++++++++++++++++-- build/base16-noche.css | 523 ++++++++++++++++-- build/base16-nord-light.css | 523 ++++++++++++++++-- build/base16-nord.css | 523 ++++++++++++++++-- build/base16-nova.css | 523 ++++++++++++++++-- build/base16-ocean.css | 523 ++++++++++++++++-- build/base16-oceanicnext.css | 523 ++++++++++++++++-- build/base16-ocote.css | 523 ++++++++++++++++-- build/base16-one-light.css | 523 ++++++++++++++++-- build/base16-onedark-dark.css | 523 ++++++++++++++++-- build/base16-onedark.css | 523 ++++++++++++++++-- build/base16-outrun-dark.css | 523 ++++++++++++++++-- build/base16-oxocarbon-dark.css | 523 ++++++++++++++++-- build/base16-oxocarbon-light.css | 523 ++++++++++++++++-- build/base16-pandora.css | 523 ++++++++++++++++-- build/base16-papel.css | 523 ++++++++++++++++-- build/base16-papercolor-dark.css | 523 ++++++++++++++++-- build/base16-papercolor-light.css | 523 ++++++++++++++++-- build/base16-paraiso.css | 523 ++++++++++++++++-- build/base16-pasque.css | 523 ++++++++++++++++-- build/base16-pastelon-de-amarillos-dark.css | 523 ++++++++++++++++-- build/base16-pastelon-de-amarillos.css | 523 ++++++++++++++++-- ...ase16-penumbra-dark-contrast-plus-plus.css | 523 ++++++++++++++++-- build/base16-penumbra-dark-contrast-plus.css | 523 ++++++++++++++++-- build/base16-penumbra-dark.css | 523 ++++++++++++++++-- ...se16-penumbra-light-contrast-plus-plus.css | 523 ++++++++++++++++-- build/base16-penumbra-light-contrast-plus.css | 523 ++++++++++++++++-- build/base16-penumbra-light.css | 523 ++++++++++++++++-- build/base16-phd.css | 523 ++++++++++++++++-- build/base16-pico.css | 523 ++++++++++++++++-- build/base16-pinky.css | 523 ++++++++++++++++-- build/base16-pop.css | 523 ++++++++++++++++-- build/base16-porple.css | 523 ++++++++++++++++-- build/base16-precious-dark-eleven.css | 523 ++++++++++++++++-- build/base16-precious-dark-fifteen.css | 523 ++++++++++++++++-- build/base16-precious-light-warm.css | 523 ++++++++++++++++-- build/base16-precious-light-white.css | 523 ++++++++++++++++-- build/base16-primer-dark-dimmed.css | 523 ++++++++++++++++-- build/base16-primer-dark.css | 523 ++++++++++++++++-- build/base16-primer-light.css | 523 ++++++++++++++++-- build/base16-purpledream.css | 523 ++++++++++++++++-- build/base16-qualia.css | 523 ++++++++++++++++-- build/base16-railscasts.css | 523 ++++++++++++++++-- build/base16-rebecca.css | 523 ++++++++++++++++-- build/base16-rose-pine-dawn.css | 523 ++++++++++++++++-- build/base16-rose-pine-moon.css | 523 ++++++++++++++++-- build/base16-rose-pine.css | 523 ++++++++++++++++-- build/base16-saga.css | 523 ++++++++++++++++-- build/base16-sagelight.css | 523 ++++++++++++++++-- build/base16-sakura.css | 523 ++++++++++++++++-- build/base16-sandcastle.css | 523 ++++++++++++++++-- build/base16-selenized-black.css | 523 ++++++++++++++++-- build/base16-selenized-dark.css | 523 ++++++++++++++++-- build/base16-selenized-light.css | 523 ++++++++++++++++-- build/base16-selenized-white.css | 523 ++++++++++++++++-- build/base16-seti.css | 523 ++++++++++++++++-- build/base16-shades-of-purple.css | 523 ++++++++++++++++-- build/base16-shadesmear-dark.css | 523 ++++++++++++++++-- build/base16-shadesmear-light.css | 523 ++++++++++++++++-- build/base16-shapeshifter.css | 523 ++++++++++++++++-- build/base16-silk-dark.css | 523 ++++++++++++++++-- build/base16-silk-light.css | 523 ++++++++++++++++-- build/base16-snazzy.css | 523 ++++++++++++++++-- build/base16-soft-server.css | 523 ++++++++++++++++-- build/base16-solarflare-light.css | 523 ++++++++++++++++-- build/base16-solarflare.css | 523 ++++++++++++++++-- build/base16-solarized-dark.css | 523 ++++++++++++++++-- build/base16-solarized-light.css | 523 ++++++++++++++++-- build/base16-spaceduck.css | 523 ++++++++++++++++-- build/base16-spacemacs.css | 523 ++++++++++++++++-- build/base16-sparky.css | 523 ++++++++++++++++-- build/base16-standardized-dark.css | 523 ++++++++++++++++-- build/base16-standardized-light.css | 523 ++++++++++++++++-- build/base16-stella.css | 523 ++++++++++++++++-- build/base16-still-alive.css | 523 ++++++++++++++++-- build/base16-summercamp.css | 523 ++++++++++++++++-- build/base16-summerfruit-dark.css | 523 ++++++++++++++++-- build/base16-summerfruit-light.css | 523 ++++++++++++++++-- build/base16-swamp-dark.css | 523 ++++++++++++++++-- build/base16-swamp-light.css | 523 ++++++++++++++++-- build/base16-synth-midnight-dark.css | 523 ++++++++++++++++-- build/base16-synth-midnight-light.css | 523 ++++++++++++++++-- build/base16-tango.css | 523 ++++++++++++++++-- build/base16-tarot.css | 523 ++++++++++++++++-- build/base16-tender.css | 523 ++++++++++++++++-- build/base16-terracotta-dark.css | 523 ++++++++++++++++-- build/base16-terracotta.css | 523 ++++++++++++++++-- build/base16-tinta.css | 523 ++++++++++++++++-- build/base16-tokyo-city-dark.css | 523 ++++++++++++++++-- build/base16-tokyo-city-light.css | 523 ++++++++++++++++-- build/base16-tokyo-city-terminal-dark.css | 523 ++++++++++++++++-- build/base16-tokyo-city-terminal-light.css | 523 ++++++++++++++++-- build/base16-tokyo-night-dark.css | 523 ++++++++++++++++-- build/base16-tokyo-night-light.css | 523 ++++++++++++++++-- build/base16-tokyo-night-moon.css | 523 ++++++++++++++++-- build/base16-tokyo-night-storm.css | 523 ++++++++++++++++-- build/base16-tokyo-night-terminal-dark.css | 523 ++++++++++++++++-- build/base16-tokyo-night-terminal-light.css | 523 ++++++++++++++++-- build/base16-tokyo-night-terminal-storm.css | 523 ++++++++++++++++-- build/base16-tokyodark-terminal.css | 523 ++++++++++++++++-- build/base16-tokyodark.css | 523 ++++++++++++++++-- build/base16-tomorrow-night-eighties.css | 523 ++++++++++++++++-- build/base16-tomorrow-night.css | 523 ++++++++++++++++-- build/base16-tomorrow.css | 523 ++++++++++++++++-- build/base16-tube.css | 523 ++++++++++++++++-- build/base16-twilight.css | 523 ++++++++++++++++-- build/base16-unikitty-dark.css | 523 ++++++++++++++++-- build/base16-unikitty-light.css | 523 ++++++++++++++++-- build/base16-unikitty-reversible.css | 523 ++++++++++++++++-- build/base16-uwunicorn.css | 523 ++++++++++++++++-- build/base16-valua.css | 523 ++++++++++++++++-- build/base16-vesper.css | 523 ++++++++++++++++-- build/base16-vice.css | 523 ++++++++++++++++-- build/base16-vulcan.css | 523 ++++++++++++++++-- build/base16-windows-10-light.css | 523 ++++++++++++++++-- build/base16-windows-10.css | 523 ++++++++++++++++-- build/base16-windows-95-light.css | 523 ++++++++++++++++-- build/base16-windows-95.css | 523 ++++++++++++++++-- build/base16-windows-highcontrast-light.css | 523 ++++++++++++++++-- build/base16-windows-highcontrast.css | 523 ++++++++++++++++-- build/base16-windows-nt-light.css | 523 ++++++++++++++++-- build/base16-windows-nt.css | 523 ++++++++++++++++-- build/base16-woodland.css | 523 ++++++++++++++++-- build/base16-xcode-dusk.css | 523 ++++++++++++++++-- build/base16-yesterday-bright.css | 523 ++++++++++++++++-- build/base16-yesterday-night.css | 523 ++++++++++++++++-- build/base16-yesterday.css | 523 ++++++++++++++++-- build/base16-zenbones.css | 523 ++++++++++++++++-- build/base16-zenburn.css | 523 ++++++++++++++++-- templates/default.mustache | 523 ++++++++++++++++-- 341 files changed, 158924 insertions(+), 19323 deletions(-) create mode 100644 build/base16-corduroy-dark.css create mode 100644 build/base16-corduroy.css diff --git a/build/base16-0x96f.css b/build/base16-0x96f.css index 92bc9e2..acf035c 100644 --- a/build/base16-0x96f.css +++ b/build/base16-0x96f.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #bcdf59; - --dnd-indicator: #ff7272; - --idle-indicator: #ffca58; - --streaming-indicator: #a093e2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #49cae4; - --accent-2: #49cae4; - --accent-3: #49cae4; - --accent-4: #aee8f4; - --accent-5: #bcdf59; - --mention: rgba(255, 202, 88, 0.1); - --mention-hover: rgba(255, 202, 88, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #262427; - --text-1: #eae9eb; - --text-2: #eae9eb; - --text-3: #fcfcfc; - --text-4: #7c7b7d; - --text-5: #676567; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #262427; /* Master background (Deepest) */ - --bg-3: #3b393c; /* Secondary background */ - --bg-2: #514f52; /* Buttons and UI elements */ - --bg-1: #676567; /* Active/Clicked states */ - - --hover: rgba(252, 252, 252, 0.05); - --active: rgba(252, 252, 252, 0.1); - --message-hover: rgba(252, 252, 252, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #262427 !important; - background: #49cae4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-3024.css b/build/base16-3024.css index 4bfffbf..acf035c 100644 --- a/build/base16-3024.css +++ b/build/base16-3024.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #01a252; - --dnd-indicator: #db2d20; - --idle-indicator: #fded02; - --streaming-indicator: #a16a94; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #01a0e4; - --accent-2: #01a0e4; - --accent-3: #01a0e4; - --accent-4: #b5e4f4; - --accent-5: #01a252; - --mention: rgba(253, 237, 2, 0.1); - --mention-hover: rgba(253, 237, 2, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #090300; - --text-1: #d6d5d4; - --text-2: #d6d5d4; - --text-3: #a5a2a2; - --text-4: #807d7c; - --text-5: #5c5855; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #090300; /* Master background (Deepest) */ - --bg-3: #3a3432; /* Secondary background */ - --bg-2: #4a4543; /* Buttons and UI elements */ - --bg-1: #5c5855; /* Active/Clicked states */ - - --hover: rgba(165, 162, 162, 0.05); - --active: rgba(165, 162, 162, 0.1); - --message-hover: rgba(165, 162, 162, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #090300 !important; - background: #01a0e4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-apathy.css b/build/base16-apathy.css index dc3934c..acf035c 100644 --- a/build/base16-apathy.css +++ b/build/base16-apathy.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #883e96; - --dnd-indicator: #3e9688; - --idle-indicator: #3e4c96; - --streaming-indicator: #4c963e; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #96883e; - --accent-2: #96883e; - --accent-3: #96883e; - --accent-4: #963e4c; - --accent-5: #883e96; - --mention: rgba(62, 76, 150, 0.1); - --mention-hover: rgba(62, 76, 150, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #031a16; - --text-1: #a7cec8; - --text-2: #a7cec8; - --text-3: #81b5ac; - --text-4: #5f9c92; - --text-5: #2b685e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #031a16; /* Master background (Deepest) */ - --bg-3: #0b342d; /* Secondary background */ - --bg-2: #184e45; /* Buttons and UI elements */ - --bg-1: #2b685e; /* Active/Clicked states */ - - --hover: rgba(129, 181, 172, 0.05); - --active: rgba(129, 181, 172, 0.1); - --message-hover: rgba(129, 181, 172, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #031a16 !important; - background: #96883e !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-apprentice.css b/build/base16-apprentice.css index 0467089..acf035c 100644 --- a/build/base16-apprentice.css +++ b/build/base16-apprentice.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #ffffaf; - --dnd-indicator: #444444; - --idle-indicator: #87af87; - --streaming-indicator: #5fafaf; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8787af; - --accent-2: #8787af; - --accent-3: #8787af; - --accent-4: #87afd7; - --accent-5: #ffffaf; - --mention: rgba(135, 175, 135, 0.1); - --mention-hover: rgba(135, 175, 135, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #262626; - --text-1: #5f8787; - --text-2: #5f8787; - --text-3: #5f5f87; - --text-4: #5f87af; - --text-5: #87875f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #262626; /* Master background (Deepest) */ - --bg-3: #af5f5f; /* Secondary background */ - --bg-2: #5f875f; /* Buttons and UI elements */ - --bg-1: #87875f; /* Active/Clicked states */ - - --hover: rgba(95, 95, 135, 0.05); - --active: rgba(95, 95, 135, 0.1); - --message-hover: rgba(95, 95, 135, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #262626 !important; - background: #8787af !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-arroz-con-dulce-dark.css b/build/base16-arroz-con-dulce-dark.css index e7413e3..acf035c 100644 --- a/build/base16-arroz-con-dulce-dark.css +++ b/build/base16-arroz-con-dulce-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #d47a50; - --dnd-indicator: #e07a8a; - --idle-indicator: #d9a441; - --streaming-indicator: #d58ab4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b99ac8; - --accent-2: #b99ac8; - --accent-3: #b99ac8; - --accent-4: #d98276; - --accent-5: #d47a50; - --mention: rgba(217, 164, 65, 0.1); - --mention-hover: rgba(217, 164, 65, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #21140f; - --text-1: #f8ebd3; - --text-2: #f8ebd3; - --text-3: #f2dfc0; - --text-4: #c8a77a; - --text-5: #a98568; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #21140f; /* Master background (Deepest) */ - --bg-3: #2c1a13; /* Secondary background */ - --bg-2: #3b241a; /* Buttons and UI elements */ - --bg-1: #a98568; /* Active/Clicked states */ - - --hover: rgba(242, 223, 192, 0.05); - --active: rgba(242, 223, 192, 0.1); - --message-hover: rgba(242, 223, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #21140f !important; - background: #b99ac8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-arroz-con-dulce.css b/build/base16-arroz-con-dulce.css index 4dda5aa..acf035c 100644 --- a/build/base16-arroz-con-dulce.css +++ b/build/base16-arroz-con-dulce.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a2380c; - --dnd-indicator: #a11d48; - --idle-indicator: #855500; - --streaming-indicator: #8c1f68; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5940a0; - --accent-2: #5940a0; - --accent-3: #5940a0; - --accent-4: #98263e; - --accent-5: #a2380c; - --mention: rgba(133, 85, 0, 0.1); - --mention-hover: rgba(133, 85, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fff8e7; - --text-1: #321c14; - --text-2: #321c14; - --text-3: #4a2c20; - --text-4: #765b45; - --text-5: #c8a77a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fff8e7; /* Master background (Deepest) */ - --bg-3: #f7ebd3; /* Secondary background */ - --bg-2: #ead6b8; /* Buttons and UI elements */ - --bg-1: #c8a77a; /* Active/Clicked states */ - - --hover: rgba(74, 44, 32, 0.05); - --active: rgba(74, 44, 32, 0.1); - --message-hover: rgba(74, 44, 32, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fff8e7 !important; - background: #5940a0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ascendancy.css b/build/base16-ascendancy.css index 7f5df95..acf035c 100644 --- a/build/base16-ascendancy.css +++ b/build/base16-ascendancy.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8bb26; - --dnd-indicator: #d05000; - --idle-indicator: #ffcc1b; - --streaming-indicator: #fabd2f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #458588; - --accent-2: #458588; - --accent-3: #458588; - --accent-4: #8f3f71; - --accent-5: #b8bb26; - --mention: rgba(255, 204, 27, 0.1); - --mention-hover: rgba(255, 204, 27, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282828; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #d5c7a1; - --text-4: #bdae93; - --text-5: #928374; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282828; /* Master background (Deepest) */ - --bg-3: #212f3d; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #928374; /* Active/Clicked states */ - - --hover: rgba(213, 199, 161, 0.05); - --active: rgba(213, 199, 161, 0.1); - --message-hover: rgba(213, 199, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282828 !important; - background: #458588 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ashes.css b/build/base16-ashes.css index 116673c..acf035c 100644 --- a/build/base16-ashes.css +++ b/build/base16-ashes.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95c7ae; - --dnd-indicator: #c7ae95; - --idle-indicator: #aec795; - --streaming-indicator: #c795ae; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #ae95c7; - --accent-2: #ae95c7; - --accent-3: #ae95c7; - --accent-4: #95aec7; - --accent-5: #95c7ae; - --mention: rgba(174, 199, 149, 0.1); - --mention-hover: rgba(174, 199, 149, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c2023; - --text-1: #dfe2e5; - --text-2: #dfe2e5; - --text-3: #c7ccd1; - --text-4: #adb3ba; - --text-5: #747c84; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c2023; /* Master background (Deepest) */ - --bg-3: #393f45; /* Secondary background */ - --bg-2: #565e65; /* Buttons and UI elements */ - --bg-1: #747c84; /* Active/Clicked states */ - - --hover: rgba(199, 204, 209, 0.05); - --active: rgba(199, 204, 209, 0.1); - --message-hover: rgba(199, 204, 209, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c2023 !important; - background: #ae95c7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-cave-light.css b/build/base16-atelier-cave-light.css index 84dcaed..acf035c 100644 --- a/build/base16-atelier-cave-light.css +++ b/build/base16-atelier-cave-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2a9292; - --dnd-indicator: #be4678; - --idle-indicator: #a06e3b; - --streaming-indicator: #955ae7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #576ddb; - --accent-2: #576ddb; - --accent-3: #576ddb; - --accent-4: #398bc6; - --accent-5: #2a9292; - --mention: rgba(160, 110, 59, 0.1); - --mention-hover: rgba(160, 110, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #efecf4; - --text-1: #26232a; - --text-2: #26232a; - --text-3: #585260; - --text-4: #655f6d; - --text-5: #7e7887; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #efecf4; /* Master background (Deepest) */ - --bg-3: #e2dfe7; /* Secondary background */ - --bg-2: #8b8792; /* Buttons and UI elements */ - --bg-1: #7e7887; /* Active/Clicked states */ - - --hover: rgba(88, 82, 96, 0.05); - --active: rgba(88, 82, 96, 0.1); - --message-hover: rgba(88, 82, 96, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #efecf4 !important; - background: #576ddb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-cave.css b/build/base16-atelier-cave.css index 63fcdc1..acf035c 100644 --- a/build/base16-atelier-cave.css +++ b/build/base16-atelier-cave.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2a9292; - --dnd-indicator: #be4678; - --idle-indicator: #a06e3b; - --streaming-indicator: #955ae7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #576ddb; - --accent-2: #576ddb; - --accent-3: #576ddb; - --accent-4: #398bc6; - --accent-5: #2a9292; - --mention: rgba(160, 110, 59, 0.1); - --mention-hover: rgba(160, 110, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #19171c; - --text-1: #e2dfe7; - --text-2: #e2dfe7; - --text-3: #8b8792; - --text-4: #7e7887; - --text-5: #655f6d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #19171c; /* Master background (Deepest) */ - --bg-3: #26232a; /* Secondary background */ - --bg-2: #585260; /* Buttons and UI elements */ - --bg-1: #655f6d; /* Active/Clicked states */ - - --hover: rgba(139, 135, 146, 0.05); - --active: rgba(139, 135, 146, 0.1); - --message-hover: rgba(139, 135, 146, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #19171c !important; - background: #576ddb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-dune-light.css b/build/base16-atelier-dune-light.css index d68f2a1..acf035c 100644 --- a/build/base16-atelier-dune-light.css +++ b/build/base16-atelier-dune-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #60ac39; - --dnd-indicator: #d73737; - --idle-indicator: #ae9513; - --streaming-indicator: #b854d4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6684e1; - --accent-2: #6684e1; - --accent-3: #6684e1; - --accent-4: #1fad83; - --accent-5: #60ac39; - --mention: rgba(174, 149, 19, 0.1); - --mention-hover: rgba(174, 149, 19, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fefbec; - --text-1: #292824; - --text-2: #292824; - --text-3: #6e6b5e; - --text-4: #7d7a68; - --text-5: #999580; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fefbec; /* Master background (Deepest) */ - --bg-3: #e8e4cf; /* Secondary background */ - --bg-2: #a6a28c; /* Buttons and UI elements */ - --bg-1: #999580; /* Active/Clicked states */ - - --hover: rgba(110, 107, 94, 0.05); - --active: rgba(110, 107, 94, 0.1); - --message-hover: rgba(110, 107, 94, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fefbec !important; - background: #6684e1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-dune.css b/build/base16-atelier-dune.css index 9997811..acf035c 100644 --- a/build/base16-atelier-dune.css +++ b/build/base16-atelier-dune.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #60ac39; - --dnd-indicator: #d73737; - --idle-indicator: #ae9513; - --streaming-indicator: #b854d4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6684e1; - --accent-2: #6684e1; - --accent-3: #6684e1; - --accent-4: #1fad83; - --accent-5: #60ac39; - --mention: rgba(174, 149, 19, 0.1); - --mention-hover: rgba(174, 149, 19, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #20201d; - --text-1: #e8e4cf; - --text-2: #e8e4cf; - --text-3: #a6a28c; - --text-4: #999580; - --text-5: #7d7a68; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #20201d; /* Master background (Deepest) */ - --bg-3: #292824; /* Secondary background */ - --bg-2: #6e6b5e; /* Buttons and UI elements */ - --bg-1: #7d7a68; /* Active/Clicked states */ - - --hover: rgba(166, 162, 140, 0.05); - --active: rgba(166, 162, 140, 0.1); - --message-hover: rgba(166, 162, 140, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #20201d !important; - background: #6684e1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-estuary-light.css b/build/base16-atelier-estuary-light.css index 598b562..acf035c 100644 --- a/build/base16-atelier-estuary-light.css +++ b/build/base16-atelier-estuary-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7d9726; - --dnd-indicator: #ba6236; - --idle-indicator: #a5980d; - --streaming-indicator: #5f9182; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #36a166; - --accent-2: #36a166; - --accent-3: #36a166; - --accent-4: #5b9d48; - --accent-5: #7d9726; - --mention: rgba(165, 152, 13, 0.1); - --mention-hover: rgba(165, 152, 13, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f4f3ec; - --text-1: #302f27; - --text-2: #302f27; - --text-3: #5f5e4e; - --text-4: #6c6b5a; - --text-5: #878573; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f4f3ec; /* Master background (Deepest) */ - --bg-3: #e7e6df; /* Secondary background */ - --bg-2: #929181; /* Buttons and UI elements */ - --bg-1: #878573; /* Active/Clicked states */ - - --hover: rgba(95, 94, 78, 0.05); - --active: rgba(95, 94, 78, 0.1); - --message-hover: rgba(95, 94, 78, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f4f3ec !important; - background: #36a166 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-estuary.css b/build/base16-atelier-estuary.css index 1ef945e..acf035c 100644 --- a/build/base16-atelier-estuary.css +++ b/build/base16-atelier-estuary.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7d9726; - --dnd-indicator: #ba6236; - --idle-indicator: #a5980d; - --streaming-indicator: #5f9182; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #36a166; - --accent-2: #36a166; - --accent-3: #36a166; - --accent-4: #5b9d48; - --accent-5: #7d9726; - --mention: rgba(165, 152, 13, 0.1); - --mention-hover: rgba(165, 152, 13, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #22221b; - --text-1: #e7e6df; - --text-2: #e7e6df; - --text-3: #929181; - --text-4: #878573; - --text-5: #6c6b5a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #22221b; /* Master background (Deepest) */ - --bg-3: #302f27; /* Secondary background */ - --bg-2: #5f5e4e; /* Buttons and UI elements */ - --bg-1: #6c6b5a; /* Active/Clicked states */ - - --hover: rgba(146, 145, 129, 0.05); - --active: rgba(146, 145, 129, 0.1); - --message-hover: rgba(146, 145, 129, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #22221b !important; - background: #36a166 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-forest-light.css b/build/base16-atelier-forest-light.css index 6ba5420..acf035c 100644 --- a/build/base16-atelier-forest-light.css +++ b/build/base16-atelier-forest-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7b9726; - --dnd-indicator: #f22c40; - --idle-indicator: #c38418; - --streaming-indicator: #6666ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #407ee7; - --accent-2: #407ee7; - --accent-3: #407ee7; - --accent-4: #3d97b8; - --accent-5: #7b9726; - --mention: rgba(195, 132, 24, 0.1); - --mention-hover: rgba(195, 132, 24, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f1efee; - --text-1: #2c2421; - --text-2: #2c2421; - --text-3: #68615e; - --text-4: #766e6b; - --text-5: #9c9491; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f1efee; /* Master background (Deepest) */ - --bg-3: #e6e2e0; /* Secondary background */ - --bg-2: #a8a19f; /* Buttons and UI elements */ - --bg-1: #9c9491; /* Active/Clicked states */ - - --hover: rgba(104, 97, 94, 0.05); - --active: rgba(104, 97, 94, 0.1); - --message-hover: rgba(104, 97, 94, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f1efee !important; - background: #407ee7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-forest.css b/build/base16-atelier-forest.css index c0f81bf..acf035c 100644 --- a/build/base16-atelier-forest.css +++ b/build/base16-atelier-forest.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7b9726; - --dnd-indicator: #f22c40; - --idle-indicator: #c38418; - --streaming-indicator: #6666ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #407ee7; - --accent-2: #407ee7; - --accent-3: #407ee7; - --accent-4: #3d97b8; - --accent-5: #7b9726; - --mention: rgba(195, 132, 24, 0.1); - --mention-hover: rgba(195, 132, 24, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1b1918; - --text-1: #e6e2e0; - --text-2: #e6e2e0; - --text-3: #a8a19f; - --text-4: #9c9491; - --text-5: #766e6b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1b1918; /* Master background (Deepest) */ - --bg-3: #2c2421; /* Secondary background */ - --bg-2: #68615e; /* Buttons and UI elements */ - --bg-1: #766e6b; /* Active/Clicked states */ - - --hover: rgba(168, 161, 159, 0.05); - --active: rgba(168, 161, 159, 0.1); - --message-hover: rgba(168, 161, 159, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1b1918 !important; - background: #407ee7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-heath-light.css b/build/base16-atelier-heath-light.css index 81e5c72..acf035c 100644 --- a/build/base16-atelier-heath-light.css +++ b/build/base16-atelier-heath-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #918b3b; - --dnd-indicator: #ca402b; - --idle-indicator: #bb8a35; - --streaming-indicator: #7b59c0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #516aec; - --accent-2: #516aec; - --accent-3: #516aec; - --accent-4: #159393; - --accent-5: #918b3b; - --mention: rgba(187, 138, 53, 0.1); - --mention-hover: rgba(187, 138, 53, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f7f3f7; - --text-1: #292329; - --text-2: #292329; - --text-3: #695d69; - --text-4: #776977; - --text-5: #9e8f9e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f7f3f7; /* Master background (Deepest) */ - --bg-3: #d8cad8; /* Secondary background */ - --bg-2: #ab9bab; /* Buttons and UI elements */ - --bg-1: #9e8f9e; /* Active/Clicked states */ - - --hover: rgba(105, 93, 105, 0.05); - --active: rgba(105, 93, 105, 0.1); - --message-hover: rgba(105, 93, 105, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f7f3f7 !important; - background: #516aec !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-heath.css b/build/base16-atelier-heath.css index 238ee63..acf035c 100644 --- a/build/base16-atelier-heath.css +++ b/build/base16-atelier-heath.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #918b3b; - --dnd-indicator: #ca402b; - --idle-indicator: #bb8a35; - --streaming-indicator: #7b59c0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #516aec; - --accent-2: #516aec; - --accent-3: #516aec; - --accent-4: #159393; - --accent-5: #918b3b; - --mention: rgba(187, 138, 53, 0.1); - --mention-hover: rgba(187, 138, 53, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1b181b; - --text-1: #d8cad8; - --text-2: #d8cad8; - --text-3: #ab9bab; - --text-4: #9e8f9e; - --text-5: #776977; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1b181b; /* Master background (Deepest) */ - --bg-3: #292329; /* Secondary background */ - --bg-2: #695d69; /* Buttons and UI elements */ - --bg-1: #776977; /* Active/Clicked states */ - - --hover: rgba(171, 155, 171, 0.05); - --active: rgba(171, 155, 171, 0.1); - --message-hover: rgba(171, 155, 171, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1b181b !important; - background: #516aec !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-lakeside-light.css b/build/base16-atelier-lakeside-light.css index a12dc0f..acf035c 100644 --- a/build/base16-atelier-lakeside-light.css +++ b/build/base16-atelier-lakeside-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #568c3b; - --dnd-indicator: #d22d72; - --idle-indicator: #8a8a0f; - --streaming-indicator: #6b6bb8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #257fad; - --accent-2: #257fad; - --accent-3: #257fad; - --accent-4: #2d8f6f; - --accent-5: #568c3b; - --mention: rgba(138, 138, 15, 0.1); - --mention-hover: rgba(138, 138, 15, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ebf8ff; - --text-1: #1f292e; - --text-2: #1f292e; - --text-3: #516d7b; - --text-4: #5a7b8c; - --text-5: #7195a8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ebf8ff; /* Master background (Deepest) */ - --bg-3: #c1e4f6; /* Secondary background */ - --bg-2: #7ea2b4; /* Buttons and UI elements */ - --bg-1: #7195a8; /* Active/Clicked states */ - - --hover: rgba(81, 109, 123, 0.05); - --active: rgba(81, 109, 123, 0.1); - --message-hover: rgba(81, 109, 123, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ebf8ff !important; - background: #257fad !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-lakeside.css b/build/base16-atelier-lakeside.css index 689709c..acf035c 100644 --- a/build/base16-atelier-lakeside.css +++ b/build/base16-atelier-lakeside.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #568c3b; - --dnd-indicator: #d22d72; - --idle-indicator: #8a8a0f; - --streaming-indicator: #6b6bb8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #257fad; - --accent-2: #257fad; - --accent-3: #257fad; - --accent-4: #2d8f6f; - --accent-5: #568c3b; - --mention: rgba(138, 138, 15, 0.1); - --mention-hover: rgba(138, 138, 15, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #161b1d; - --text-1: #c1e4f6; - --text-2: #c1e4f6; - --text-3: #7ea2b4; - --text-4: #7195a8; - --text-5: #5a7b8c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #161b1d; /* Master background (Deepest) */ - --bg-3: #1f292e; /* Secondary background */ - --bg-2: #516d7b; /* Buttons and UI elements */ - --bg-1: #5a7b8c; /* Active/Clicked states */ - - --hover: rgba(126, 162, 180, 0.05); - --active: rgba(126, 162, 180, 0.1); - --message-hover: rgba(126, 162, 180, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #161b1d !important; - background: #257fad !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-plateau-light.css b/build/base16-atelier-plateau-light.css index 4042001..acf035c 100644 --- a/build/base16-atelier-plateau-light.css +++ b/build/base16-atelier-plateau-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4b8b8b; - --dnd-indicator: #ca4949; - --idle-indicator: #a06e3b; - --streaming-indicator: #8464c4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7272ca; - --accent-2: #7272ca; - --accent-3: #7272ca; - --accent-4: #5485b6; - --accent-5: #4b8b8b; - --mention: rgba(160, 110, 59, 0.1); - --mention-hover: rgba(160, 110, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f4ecec; - --text-1: #292424; - --text-2: #292424; - --text-3: #585050; - --text-4: #655d5d; - --text-5: #7e7777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f4ecec; /* Master background (Deepest) */ - --bg-3: #e7dfdf; /* Secondary background */ - --bg-2: #8a8585; /* Buttons and UI elements */ - --bg-1: #7e7777; /* Active/Clicked states */ - - --hover: rgba(88, 80, 80, 0.05); - --active: rgba(88, 80, 80, 0.1); - --message-hover: rgba(88, 80, 80, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f4ecec !important; - background: #7272ca !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-plateau.css b/build/base16-atelier-plateau.css index 0b06a7d..acf035c 100644 --- a/build/base16-atelier-plateau.css +++ b/build/base16-atelier-plateau.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4b8b8b; - --dnd-indicator: #ca4949; - --idle-indicator: #a06e3b; - --streaming-indicator: #8464c4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7272ca; - --accent-2: #7272ca; - --accent-3: #7272ca; - --accent-4: #5485b6; - --accent-5: #4b8b8b; - --mention: rgba(160, 110, 59, 0.1); - --mention-hover: rgba(160, 110, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1b1818; - --text-1: #e7dfdf; - --text-2: #e7dfdf; - --text-3: #8a8585; - --text-4: #7e7777; - --text-5: #655d5d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1b1818; /* Master background (Deepest) */ - --bg-3: #292424; /* Secondary background */ - --bg-2: #585050; /* Buttons and UI elements */ - --bg-1: #655d5d; /* Active/Clicked states */ - - --hover: rgba(138, 133, 133, 0.05); - --active: rgba(138, 133, 133, 0.1); - --message-hover: rgba(138, 133, 133, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1b1818 !important; - background: #7272ca !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-savanna-light.css b/build/base16-atelier-savanna-light.css index 3338c86..acf035c 100644 --- a/build/base16-atelier-savanna-light.css +++ b/build/base16-atelier-savanna-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #489963; - --dnd-indicator: #b16139; - --idle-indicator: #a07e3b; - --streaming-indicator: #55859b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #478c90; - --accent-2: #478c90; - --accent-3: #478c90; - --accent-4: #1c9aa0; - --accent-5: #489963; - --mention: rgba(160, 126, 59, 0.1); - --mention-hover: rgba(160, 126, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ecf4ee; - --text-1: #232a25; - --text-2: #232a25; - --text-3: #526057; - --text-4: #5f6d64; - --text-5: #78877d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ecf4ee; /* Master background (Deepest) */ - --bg-3: #dfe7e2; /* Secondary background */ - --bg-2: #87928a; /* Buttons and UI elements */ - --bg-1: #78877d; /* Active/Clicked states */ - - --hover: rgba(82, 96, 87, 0.05); - --active: rgba(82, 96, 87, 0.1); - --message-hover: rgba(82, 96, 87, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ecf4ee !important; - background: #478c90 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-savanna.css b/build/base16-atelier-savanna.css index 5fe470a..acf035c 100644 --- a/build/base16-atelier-savanna.css +++ b/build/base16-atelier-savanna.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #489963; - --dnd-indicator: #b16139; - --idle-indicator: #a07e3b; - --streaming-indicator: #55859b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #478c90; - --accent-2: #478c90; - --accent-3: #478c90; - --accent-4: #1c9aa0; - --accent-5: #489963; - --mention: rgba(160, 126, 59, 0.1); - --mention-hover: rgba(160, 126, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171c19; - --text-1: #dfe7e2; - --text-2: #dfe7e2; - --text-3: #87928a; - --text-4: #78877d; - --text-5: #5f6d64; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171c19; /* Master background (Deepest) */ - --bg-3: #232a25; /* Secondary background */ - --bg-2: #526057; /* Buttons and UI elements */ - --bg-1: #5f6d64; /* Active/Clicked states */ - - --hover: rgba(135, 146, 138, 0.05); - --active: rgba(135, 146, 138, 0.1); - --message-hover: rgba(135, 146, 138, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171c19 !important; - background: #478c90 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-seaside-light.css b/build/base16-atelier-seaside-light.css index ed54d35..acf035c 100644 --- a/build/base16-atelier-seaside-light.css +++ b/build/base16-atelier-seaside-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #29a329; - --dnd-indicator: #e6193c; - --idle-indicator: #98981b; - --streaming-indicator: #ad2bee; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3d62f5; - --accent-2: #3d62f5; - --accent-3: #3d62f5; - --accent-4: #1999b3; - --accent-5: #29a329; - --mention: rgba(152, 152, 27, 0.1); - --mention-hover: rgba(152, 152, 27, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f4fbf4; - --text-1: #242924; - --text-2: #242924; - --text-3: #5e6e5e; - --text-4: #687d68; - --text-5: #809980; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f4fbf4; /* Master background (Deepest) */ - --bg-3: #cfe8cf; /* Secondary background */ - --bg-2: #8ca68c; /* Buttons and UI elements */ - --bg-1: #809980; /* Active/Clicked states */ - - --hover: rgba(94, 110, 94, 0.05); - --active: rgba(94, 110, 94, 0.1); - --message-hover: rgba(94, 110, 94, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f4fbf4 !important; - background: #3d62f5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-seaside.css b/build/base16-atelier-seaside.css index 46fc46e..acf035c 100644 --- a/build/base16-atelier-seaside.css +++ b/build/base16-atelier-seaside.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #29a329; - --dnd-indicator: #e6193c; - --idle-indicator: #98981b; - --streaming-indicator: #ad2bee; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3d62f5; - --accent-2: #3d62f5; - --accent-3: #3d62f5; - --accent-4: #1999b3; - --accent-5: #29a329; - --mention: rgba(152, 152, 27, 0.1); - --mention-hover: rgba(152, 152, 27, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #131513; - --text-1: #cfe8cf; - --text-2: #cfe8cf; - --text-3: #8ca68c; - --text-4: #809980; - --text-5: #687d68; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #131513; /* Master background (Deepest) */ - --bg-3: #242924; /* Secondary background */ - --bg-2: #5e6e5e; /* Buttons and UI elements */ - --bg-1: #687d68; /* Active/Clicked states */ - - --hover: rgba(140, 166, 140, 0.05); - --active: rgba(140, 166, 140, 0.1); - --message-hover: rgba(140, 166, 140, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #131513 !important; - background: #3d62f5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-sulphurpool-light.css b/build/base16-atelier-sulphurpool-light.css index 664669f..acf035c 100644 --- a/build/base16-atelier-sulphurpool-light.css +++ b/build/base16-atelier-sulphurpool-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #ac9739; - --dnd-indicator: #c94922; - --idle-indicator: #c08b30; - --streaming-indicator: #6679cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3d8fd1; - --accent-2: #3d8fd1; - --accent-3: #3d8fd1; - --accent-4: #22a2c9; - --accent-5: #ac9739; - --mention: rgba(192, 139, 48, 0.1); - --mention-hover: rgba(192, 139, 48, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f7ff; - --text-1: #293256; - --text-2: #293256; - --text-3: #5e6687; - --text-4: #6b7394; - --text-5: #898ea4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f7ff; /* Master background (Deepest) */ - --bg-3: #dfe2f1; /* Secondary background */ - --bg-2: #979db4; /* Buttons and UI elements */ - --bg-1: #898ea4; /* Active/Clicked states */ - - --hover: rgba(94, 102, 135, 0.05); - --active: rgba(94, 102, 135, 0.1); - --message-hover: rgba(94, 102, 135, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f7ff !important; - background: #3d8fd1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atelier-sulphurpool.css b/build/base16-atelier-sulphurpool.css index e2797e3..acf035c 100644 --- a/build/base16-atelier-sulphurpool.css +++ b/build/base16-atelier-sulphurpool.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #ac9739; - --dnd-indicator: #c94922; - --idle-indicator: #c08b30; - --streaming-indicator: #6679cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3d8fd1; - --accent-2: #3d8fd1; - --accent-3: #3d8fd1; - --accent-4: #22a2c9; - --accent-5: #ac9739; - --mention: rgba(192, 139, 48, 0.1); - --mention-hover: rgba(192, 139, 48, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #202746; - --text-1: #dfe2f1; - --text-2: #dfe2f1; - --text-3: #979db4; - --text-4: #898ea4; - --text-5: #6b7394; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #202746; /* Master background (Deepest) */ - --bg-3: #293256; /* Secondary background */ - --bg-2: #5e6687; /* Buttons and UI elements */ - --bg-1: #6b7394; /* Active/Clicked states */ - - --hover: rgba(151, 157, 180, 0.05); - --active: rgba(151, 157, 180, 0.1); - --message-hover: rgba(151, 157, 180, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #202746 !important; - background: #3d8fd1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-atlas.css b/build/base16-atlas.css index d8d22e7..acf035c 100644 --- a/build/base16-atlas.css +++ b/build/base16-atlas.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7fc06e; - --dnd-indicator: #ff5a67; - --idle-indicator: #ffcc1b; - --streaming-indicator: #9a70a4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #14747e; - --accent-2: #14747e; - --accent-3: #14747e; - --accent-4: #5dd7b9; - --accent-5: #7fc06e; - --mention: rgba(255, 204, 27, 0.1); - --mention-hover: rgba(255, 204, 27, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #002635; - --text-1: #e6e6dc; - --text-2: #e6e6dc; - --text-3: #a1a19a; - --text-4: #869696; - --text-5: #6c8b91; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #002635; /* Master background (Deepest) */ - --bg-3: #00384d; /* Secondary background */ - --bg-2: #517f8d; /* Buttons and UI elements */ - --bg-1: #6c8b91; /* Active/Clicked states */ - - --hover: rgba(161, 161, 154, 0.05); - --active: rgba(161, 161, 154, 0.1); - --message-hover: rgba(161, 161, 154, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #002635 !important; - background: #14747e !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ayu-dark.css b/build/base16-ayu-dark.css index 64d2862..acf035c 100644 --- a/build/base16-ayu-dark.css +++ b/build/base16-ayu-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #aad94c; - --dnd-indicator: #f07178; - --idle-indicator: #ffb454; - --streaming-indicator: #d2a6ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #59c2ff; - --accent-2: #59c2ff; - --accent-3: #59c2ff; - --accent-4: #95e6cb; - --accent-5: #aad94c; - --mention: rgba(255, 180, 84, 0.1); - --mention-hover: rgba(255, 180, 84, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0b0e14; - --text-1: #ece8db; - --text-2: #ece8db; - --text-3: #e6e1cf; - --text-4: #bfbdb6; - --text-5: #3e4b59; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0b0e14; /* Master background (Deepest) */ - --bg-3: #131721; /* Secondary background */ - --bg-2: #202229; /* Buttons and UI elements */ - --bg-1: #3e4b59; /* Active/Clicked states */ - - --hover: rgba(230, 225, 207, 0.05); - --active: rgba(230, 225, 207, 0.1); - --message-hover: rgba(230, 225, 207, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0b0e14 !important; - background: #59c2ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ayu-light.css b/build/base16-ayu-light.css index a7549e7..acf035c 100644 --- a/build/base16-ayu-light.css +++ b/build/base16-ayu-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6cbf49; - --dnd-indicator: #f07171; - --idle-indicator: #f2ae49; - --streaming-indicator: #a37acc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #399ee6; - --accent-2: #399ee6; - --accent-3: #399ee6; - --accent-4: #4cbf99; - --accent-5: #6cbf49; - --mention: rgba(242, 174, 73, 0.1); - --mention-hover: rgba(242, 174, 73, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f8f9fa; - --text-1: #4e5257; - --text-2: #4e5257; - --text-3: #5c6166; - --text-4: #8a9199; - --text-5: #a0a6ac; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f8f9fa; /* Master background (Deepest) */ - --bg-3: #edeff1; /* Secondary background */ - --bg-2: #d2d4d8; /* Buttons and UI elements */ - --bg-1: #a0a6ac; /* Active/Clicked states */ - - --hover: rgba(92, 97, 102, 0.05); - --active: rgba(92, 97, 102, 0.1); - --message-hover: rgba(92, 97, 102, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f8f9fa !important; - background: #399ee6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ayu-mirage.css b/build/base16-ayu-mirage.css index 02dd780..acf035c 100644 --- a/build/base16-ayu-mirage.css +++ b/build/base16-ayu-mirage.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #d5ff80; - --dnd-indicator: #f28779; - --idle-indicator: #ffd173; - --streaming-indicator: #d4bfff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #73d0ff; - --accent-2: #73d0ff; - --accent-3: #73d0ff; - --accent-4: #95e6cb; - --accent-5: #d5ff80; - --mention: rgba(255, 209, 115, 0.1); - --mention-hover: rgba(255, 209, 115, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1f2430; - --text-1: #d9d7ce; - --text-2: #d9d7ce; - --text-3: #cccac2; - --text-4: #707a8c; - --text-5: #4a5059; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1f2430; /* Master background (Deepest) */ - --bg-3: #242936; /* Secondary background */ - --bg-2: #323844; /* Buttons and UI elements */ - --bg-1: #4a5059; /* Active/Clicked states */ - - --hover: rgba(204, 202, 194, 0.05); - --active: rgba(204, 202, 194, 0.1); - --message-hover: rgba(204, 202, 194, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1f2430 !important; - background: #73d0ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-aztec.css b/build/base16-aztec.css index 9259ee1..acf035c 100644 --- a/build/base16-aztec.css +++ b/build/base16-aztec.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #63d932; - --dnd-indicator: #ee2e00; - --idle-indicator: #eebb00; - --streaming-indicator: #883e9f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5b4a9f; - --accent-2: #5b4a9f; - --accent-3: #5b4a9f; - --accent-4: #3d94a5; - --accent-5: #63d932; - --mention: rgba(238, 187, 0, 0.1); - --mention-hover: rgba(238, 187, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101600; - --text-1: #ffe178; - --text-2: #ffe178; - --text-3: #ffda51; - --text-4: #ffd129; - --text-5: #2e2e05; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101600; /* Master background (Deepest) */ - --bg-3: #1a1e01; /* Secondary background */ - --bg-2: #242604; /* Buttons and UI elements */ - --bg-1: #2e2e05; /* Active/Clicked states */ - - --hover: rgba(255, 218, 81, 0.05); - --active: rgba(255, 218, 81, 0.1); - --message-hover: rgba(255, 218, 81, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101600 !important; - background: #5b4a9f !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-bespin.css b/build/base16-bespin.css index 0c27961..acf035c 100644 --- a/build/base16-bespin.css +++ b/build/base16-bespin.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54be0d; - --dnd-indicator: #cf6a4c; - --idle-indicator: #f9ee98; - --streaming-indicator: #9b859d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5ea6ea; - --accent-2: #5ea6ea; - --accent-3: #5ea6ea; - --accent-4: #afc4db; - --accent-5: #54be0d; - --mention: rgba(249, 238, 152, 0.1); - --mention-hover: rgba(249, 238, 152, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #28211c; - --text-1: #9d9b97; - --text-2: #9d9b97; - --text-3: #8a8986; - --text-4: #797977; - --text-5: #666666; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #28211c; /* Master background (Deepest) */ - --bg-3: #36312e; /* Secondary background */ - --bg-2: #5e5d5c; /* Buttons and UI elements */ - --bg-1: #666666; /* Active/Clicked states */ - - --hover: rgba(138, 137, 134, 0.05); - --active: rgba(138, 137, 134, 0.1); - --message-hover: rgba(138, 137, 134, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #28211c !important; - background: #5ea6ea !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-bathory.css b/build/base16-black-metal-bathory.css index 201a812..acf035c 100644 --- a/build/base16-black-metal-bathory.css +++ b/build/base16-black-metal-bathory.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #fbcb97; - --dnd-indicator: #5f8787; - --idle-indicator: #e78a53; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #fbcb97; - --mention: rgba(231, 138, 83, 0.1); - --mention-hover: rgba(231, 138, 83, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-burzum.css b/build/base16-black-metal-burzum.css index b7e45a7..acf035c 100644 --- a/build/base16-black-metal-burzum.css +++ b/build/base16-black-metal-burzum.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #ddeecc; - --dnd-indicator: #5f8787; - --idle-indicator: #99bbaa; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #ddeecc; - --mention: rgba(153, 187, 170, 0.1); - --mention-hover: rgba(153, 187, 170, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-dark-funeral.css b/build/base16-black-metal-dark-funeral.css index bb395b8..acf035c 100644 --- a/build/base16-black-metal-dark-funeral.css +++ b/build/base16-black-metal-dark-funeral.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #d0dfee; - --dnd-indicator: #5f8787; - --idle-indicator: #5f81a5; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #d0dfee; - --mention: rgba(95, 129, 165, 0.1); - --mention-hover: rgba(95, 129, 165, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-gorgoroth.css b/build/base16-black-metal-gorgoroth.css index e21f82a..acf035c 100644 --- a/build/base16-black-metal-gorgoroth.css +++ b/build/base16-black-metal-gorgoroth.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9b8d7f; - --dnd-indicator: #5f8787; - --idle-indicator: #8c7f70; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #9b8d7f; - --mention: rgba(140, 127, 112, 0.1); - --mention-hover: rgba(140, 127, 112, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-immortal.css b/build/base16-black-metal-immortal.css index 4c49325..acf035c 100644 --- a/build/base16-black-metal-immortal.css +++ b/build/base16-black-metal-immortal.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7799bb; - --dnd-indicator: #5f8787; - --idle-indicator: #556677; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #7799bb; - --mention: rgba(85, 102, 119, 0.1); - --mention-hover: rgba(85, 102, 119, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-khold.css b/build/base16-black-metal-khold.css index 2cdd17c..acf035c 100644 --- a/build/base16-black-metal-khold.css +++ b/build/base16-black-metal-khold.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #eceee3; - --dnd-indicator: #5f8787; - --idle-indicator: #974b46; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #eceee3; - --mention: rgba(151, 75, 70, 0.1); - --mention-hover: rgba(151, 75, 70, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-marduk.css b/build/base16-black-metal-marduk.css index b21480c..acf035c 100644 --- a/build/base16-black-metal-marduk.css +++ b/build/base16-black-metal-marduk.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a5aaa7; - --dnd-indicator: #5f8787; - --idle-indicator: #626b67; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #a5aaa7; - --mention: rgba(98, 107, 103, 0.1); - --mention-hover: rgba(98, 107, 103, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-mayhem.css b/build/base16-black-metal-mayhem.css index eeb1126..acf035c 100644 --- a/build/base16-black-metal-mayhem.css +++ b/build/base16-black-metal-mayhem.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #f3ecd4; - --dnd-indicator: #5f8787; - --idle-indicator: #eecc6c; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #f3ecd4; - --mention: rgba(238, 204, 108, 0.1); - --mention-hover: rgba(238, 204, 108, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-nile.css b/build/base16-black-metal-nile.css index f072e23..acf035c 100644 --- a/build/base16-black-metal-nile.css +++ b/build/base16-black-metal-nile.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #aa9988; - --dnd-indicator: #5f8787; - --idle-indicator: #777755; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #aa9988; - --mention: rgba(119, 119, 85, 0.1); - --mention-hover: rgba(119, 119, 85, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal-venom.css b/build/base16-black-metal-venom.css index 5fa2939..acf035c 100644 --- a/build/base16-black-metal-venom.css +++ b/build/base16-black-metal-venom.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #f8f7f2; - --dnd-indicator: #5f8787; - --idle-indicator: #79241f; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #f8f7f2; - --mention: rgba(121, 36, 31, 0.1); - --mention-hover: rgba(121, 36, 31, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-black-metal.css b/build/base16-black-metal.css index 20393a6..acf035c 100644 --- a/build/base16-black-metal.css +++ b/build/base16-black-metal.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #dd9999; - --dnd-indicator: #5f8787; - --idle-indicator: #a06666; - --streaming-indicator: #999999; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #888888; - --accent-2: #888888; - --accent-3: #888888; - --accent-4: #aaaaaa; - --accent-5: #dd9999; - --mention: rgba(160, 102, 102, 0.1); - --mention-hover: rgba(160, 102, 102, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #999999; - --text-2: #999999; - --text-3: #c1c1c1; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #121212; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(193, 193, 193, 0.05); - --active: rgba(193, 193, 193, 0.1); - --message-hover: rgba(193, 193, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #888888 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-blueforest.css b/build/base16-blueforest.css index d9208af..acf035c 100644 --- a/build/base16-blueforest.css +++ b/build/base16-blueforest.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #80ff80; - --dnd-indicator: #fffab1; - --idle-indicator: #91ccff; - --streaming-indicator: #0099ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #a2cff5; - --accent-2: #a2cff5; - --accent-3: #a2cff5; - --accent-4: #80ff80; - --accent-5: #80ff80; - --mention: rgba(145, 204, 255, 0.1); - --mention-hover: rgba(145, 204, 255, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #141f2e; - --text-1: #91ccff; - --text-2: #91ccff; - --text-3: #ffcc33; - --text-4: #1e5c1e; - --text-5: #a0ffa0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #141f2e; /* Master background (Deepest) */ - --bg-3: #1e5c1e; /* Secondary background */ - --bg-2: #273e5c; /* Buttons and UI elements */ - --bg-1: #a0ffa0; /* Active/Clicked states */ - - --hover: rgba(255, 204, 51, 0.05); - --active: rgba(255, 204, 51, 0.1); - --message-hover: rgba(255, 204, 51, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #141f2e !important; - background: #a2cff5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-blueish.css b/build/base16-blueish.css index 5c96d41..acf035c 100644 --- a/build/base16-blueish.css +++ b/build/base16-blueish.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c3e88d; - --dnd-indicator: #4ce587; - --idle-indicator: #f6cd5c; - --streaming-indicator: #ff84dd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #5fd1ff; - --accent-5: #c3e88d; - --mention: rgba(246, 205, 92, 0.1); - --mention-hover: rgba(246, 205, 92, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #182430; - --text-1: #ddeaf6; - --text-2: #ddeaf6; - --text-3: #c8e1f8; - --text-4: #74afe7; - --text-5: #616d78; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #182430; /* Master background (Deepest) */ - --bg-3: #243c54; /* Secondary background */ - --bg-2: #46290a; /* Buttons and UI elements */ - --bg-1: #616d78; /* Active/Clicked states */ - - --hover: rgba(200, 225, 248, 0.05); - --active: rgba(200, 225, 248, 0.1); - --message-hover: rgba(200, 225, 248, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #182430 !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-boo-shnickle-light.css b/build/base16-boo-shnickle-light.css index 14b5a23..acf035c 100644 --- a/build/base16-boo-shnickle-light.css +++ b/build/base16-boo-shnickle-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #e7ff99; - --dnd-indicator: #ffbfa5; - --idle-indicator: #fff299; - --streaming-indicator: #f2bfd9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #bfbfd9; - --accent-2: #bfbfd9; - --accent-3: #bfbfd9; - --accent-4: #bfffc5; - --accent-5: #e7ff99; - --mention: rgba(255, 242, 153, 0.1); - --mention-hover: rgba(255, 242, 153, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffcc; - --text-1: #3a3a2e; - --text-2: #3a3a2e; - --text-3: #5b5b49; - --text-4: #7c7c63; - --text-5: #9c9c7d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffcc; /* Master background (Deepest) */ - --bg-3: #dedeb2; /* Secondary background */ - --bg-2: #bdbd97; /* Buttons and UI elements */ - --bg-1: #9c9c7d; /* Active/Clicked states */ - - --hover: rgba(91, 91, 73, 0.05); - --active: rgba(91, 91, 73, 0.1); - --message-hover: rgba(91, 91, 73, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffcc !important; - background: #bfbfd9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-boo-shnickle.css b/build/base16-boo-shnickle.css index 70d2f4c..acf035c 100644 --- a/build/base16-boo-shnickle.css +++ b/build/base16-boo-shnickle.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #e7ff99; - --dnd-indicator: #ffbfa5; - --idle-indicator: #fff299; - --streaming-indicator: #f2bfd9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #bfbfd9; - --accent-2: #bfbfd9; - --accent-3: #bfbfd9; - --accent-4: #bfffc5; - --accent-5: #e7ff99; - --mention: rgba(255, 242, 153, 0.1); - --mention-hover: rgba(255, 242, 153, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #191914; - --text-1: #dedeb2; - --text-2: #dedeb2; - --text-3: #bdbd97; - --text-4: #9c9c7d; - --text-5: #7c7c63; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #191914; /* Master background (Deepest) */ - --bg-3: #3a3a2e; /* Secondary background */ - --bg-2: #5b5b49; /* Buttons and UI elements */ - --bg-1: #7c7c63; /* Active/Clicked states */ - - --hover: rgba(189, 189, 151, 0.05); - --active: rgba(189, 189, 151, 0.1); - --message-hover: rgba(189, 189, 151, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #191914 !important; - background: #bfbfd9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-bosque.css b/build/base16-bosque.css index 7a3d307..acf035c 100644 --- a/build/base16-bosque.css +++ b/build/base16-bosque.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6fc56e; - --dnd-indicator: #e2706a; - --idle-indicator: #c8b84a; - --streaming-indicator: #b894d0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6dae9e; - --accent-2: #6dae9e; - --accent-3: #6dae9e; - --accent-4: #5fd0b8; - --accent-5: #6fc56e; - --mention: rgba(200, 184, 74, 0.1); - --mention-hover: rgba(200, 184, 74, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0e1410; - --text-1: #daebda; - --text-2: #daebda; - --text-3: #cfe5d2; - --text-4: #96aa98; - --text-5: #5c6e5e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0e1410; /* Master background (Deepest) */ - --bg-3: #16211a; /* Secondary background */ - --bg-2: #1e3023; /* Buttons and UI elements */ - --bg-1: #5c6e5e; /* Active/Clicked states */ - - --hover: rgba(207, 229, 210, 0.05); - --active: rgba(207, 229, 210, 0.1); - --message-hover: rgba(207, 229, 210, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0e1410 !important; - background: #6dae9e !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-brasa.css b/build/base16-brasa.css index 63c644e..acf035c 100644 --- a/build/base16-brasa.css +++ b/build/base16-brasa.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8c24a; - --dnd-indicator: #f2685a; - --idle-indicator: #f0b23a; - --streaming-indicator: #e68aa2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #9aa6e0; - --accent-2: #9aa6e0; - --accent-3: #9aa6e0; - --accent-4: #6bc8b8; - --accent-5: #b8c24a; - --mention: rgba(240, 178, 58, 0.1); - --mention-hover: rgba(240, 178, 58, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1a0f0a; - --text-1: #f6e1cc; - --text-2: #f6e1cc; - --text-3: #f0d8c0; - --text-4: #b59d88; - --text-5: #7a6150; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1a0f0a; /* Master background (Deepest) */ - --bg-3: #2b1c14; /* Secondary background */ - --bg-2: #45261a; /* Buttons and UI elements */ - --bg-1: #7a6150; /* Active/Clicked states */ - - --hover: rgba(240, 216, 192, 0.05); - --active: rgba(240, 216, 192, 0.1); - --message-hover: rgba(240, 216, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1a0f0a !important; - background: #9aa6e0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-brewer.css b/build/base16-brewer.css index bc2f0d2..acf035c 100644 --- a/build/base16-brewer.css +++ b/build/base16-brewer.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #31a354; - --dnd-indicator: #e31a1c; - --idle-indicator: #dca060; - --streaming-indicator: #756bb1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3182bd; - --accent-2: #3182bd; - --accent-3: #3182bd; - --accent-4: #80b1d3; - --accent-5: #31a354; - --mention: rgba(220, 160, 96, 0.1); - --mention-hover: rgba(220, 160, 96, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0c0d0e; - --text-1: #dadbdc; - --text-2: #dadbdc; - --text-3: #b7b8b9; - --text-4: #959697; - --text-5: #737475; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0c0d0e; /* Master background (Deepest) */ - --bg-3: #2e2f30; /* Secondary background */ - --bg-2: #515253; /* Buttons and UI elements */ - --bg-1: #737475; /* Active/Clicked states */ - - --hover: rgba(183, 184, 185, 0.05); - --active: rgba(183, 184, 185, 0.1); - --message-hover: rgba(183, 184, 185, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0c0d0e !important; - background: #3182bd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-bright.css b/build/base16-bright.css index 029bd5a..acf035c 100644 --- a/build/base16-bright.css +++ b/build/base16-bright.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a1c659; - --dnd-indicator: #fb0120; - --idle-indicator: #fda331; - --streaming-indicator: #d381c3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6fb3d2; - --accent-2: #6fb3d2; - --accent-3: #6fb3d2; - --accent-4: #76c7b7; - --accent-5: #a1c659; - --mention: rgba(253, 163, 49, 0.1); - --mention-hover: rgba(253, 163, 49, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #f5f5f5; - --text-2: #f5f5f5; - --text-3: #e0e0e0; - --text-4: #d0d0d0; - --text-5: #b0b0b0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #303030; /* Secondary background */ - --bg-2: #505050; /* Buttons and UI elements */ - --bg-1: #b0b0b0; /* Active/Clicked states */ - - --hover: rgba(224, 224, 224, 0.05); - --active: rgba(224, 224, 224, 0.1); - --message-hover: rgba(224, 224, 224, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #6fb3d2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-brogrammer.css b/build/base16-brogrammer.css index 9c15221..acf035c 100644 --- a/build/base16-brogrammer.css +++ b/build/base16-brogrammer.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #f3bd09; - --dnd-indicator: #d6dbe5; - --idle-indicator: #1dd361; - --streaming-indicator: #0f7ddb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5350b9; - --accent-2: #5350b9; - --accent-3: #5350b9; - --accent-4: #1081d6; - --accent-5: #f3bd09; - --mention: rgba(29, 211, 97, 0.1); - --mention-hover: rgba(29, 211, 97, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1f1f1f; - --text-1: #1081d6; - --text-2: #1081d6; - --text-3: #4e5ab7; - --text-4: #2a84d2; - --text-5: #ecba0f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1f1f1f; /* Master background (Deepest) */ - --bg-3: #f81118; /* Secondary background */ - --bg-2: #2dc55e; /* Buttons and UI elements */ - --bg-1: #ecba0f; /* Active/Clicked states */ - - --hover: rgba(78, 90, 183, 0.05); - --active: rgba(78, 90, 183, 0.1); - --message-hover: rgba(78, 90, 183, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1f1f1f !important; - background: #5350b9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-brushtrees-dark.css b/build/base16-brushtrees-dark.css index 635ab0e..acf035c 100644 --- a/build/base16-brushtrees-dark.css +++ b/build/base16-brushtrees-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #87b386; - --dnd-indicator: #b38686; - --idle-indicator: #aab386; - --streaming-indicator: #b386b2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #868cb3; - --accent-2: #868cb3; - --accent-3: #868cb3; - --accent-4: #86b3b3; - --accent-5: #87b386; - --mention: rgba(170, 179, 134, 0.1); - --mention-hover: rgba(170, 179, 134, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #485867; - --text-1: #c9dbdc; - --text-2: #c9dbdc; - --text-3: #b0c5c8; - --text-4: #98afb5; - --text-5: #8299a1; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #485867; /* Master background (Deepest) */ - --bg-3: #5a6d7a; /* Secondary background */ - --bg-2: #6d828e; /* Buttons and UI elements */ - --bg-1: #8299a1; /* Active/Clicked states */ - - --hover: rgba(176, 197, 200, 0.05); - --active: rgba(176, 197, 200, 0.1); - --message-hover: rgba(176, 197, 200, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #485867 !important; - background: #868cb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-brushtrees.css b/build/base16-brushtrees.css index fdc64de..acf035c 100644 --- a/build/base16-brushtrees.css +++ b/build/base16-brushtrees.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #87b386; - --dnd-indicator: #b38686; - --idle-indicator: #aab386; - --streaming-indicator: #b386b2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #868cb3; - --accent-2: #868cb3; - --accent-3: #868cb3; - --accent-4: #86b3b3; - --accent-5: #87b386; - --mention: rgba(170, 179, 134, 0.1); - --mention-hover: rgba(170, 179, 134, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e3efef; - --text-1: #5a6d7a; - --text-2: #5a6d7a; - --text-3: #6d828e; - --text-4: #8299a1; - --text-5: #98afb5; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e3efef; /* Master background (Deepest) */ - --bg-3: #c9dbdc; /* Secondary background */ - --bg-2: #b0c5c8; /* Buttons and UI elements */ - --bg-1: #98afb5; /* Active/Clicked states */ - - --hover: rgba(109, 130, 142, 0.05); - --active: rgba(109, 130, 142, 0.1); - --message-hover: rgba(109, 130, 142, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e3efef !important; - background: #868cb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cacao.css b/build/base16-cacao.css index 46f05c4..acf035c 100644 --- a/build/base16-cacao.css +++ b/build/base16-cacao.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9ac97a; - --dnd-indicator: #e0705c; - --idle-indicator: #e8a84a; - --streaming-indicator: #ce8ab0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #a89ad0; - --accent-2: #a89ad0; - --accent-3: #a89ad0; - --accent-4: #74c8b0; - --accent-5: #9ac97a; - --mention: rgba(232, 168, 74, 0.1); - --mention-hover: rgba(232, 168, 74, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #160f0c; - --text-1: #eedecd; - --text-2: #eedecd; - --text-3: #e8d6c4; - --text-4: #af9b8b; - --text-5: #766052; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #160f0c; /* Master background (Deepest) */ - --bg-3: #241913; /* Secondary background */ - --bg-2: #3a281e; /* Buttons and UI elements */ - --bg-1: #766052; /* Active/Clicked states */ - - --hover: rgba(232, 214, 196, 0.05); - --active: rgba(232, 214, 196, 0.1); - --message-hover: rgba(232, 214, 196, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #160f0c !important; - background: #a89ad0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-caroline.css b/build/base16-caroline.css index 80ade25..acf035c 100644 --- a/build/base16-caroline.css +++ b/build/base16-caroline.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #806c61; - --dnd-indicator: #c24f57; - --idle-indicator: #f28171; - --streaming-indicator: #a63650; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #684c59; - --accent-2: #684c59; - --accent-3: #684c59; - --accent-4: #6b6566; - --accent-5: #806c61; - --mention: rgba(242, 129, 113, 0.1); - --mention-hover: rgba(242, 129, 113, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1213; - --text-1: #c58d7b; - --text-2: #c58d7b; - --text-3: #a87569; - --text-4: #8b5d57; - --text-5: #6d4745; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1213; /* Master background (Deepest) */ - --bg-3: #3a2425; /* Secondary background */ - --bg-2: #563837; /* Buttons and UI elements */ - --bg-1: #6d4745; /* Active/Clicked states */ - - --hover: rgba(168, 117, 105, 0.05); - --active: rgba(168, 117, 105, 0.1); - --message-hover: rgba(168, 117, 105, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1213 !important; - background: #684c59 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-catppuccin-frappe.css b/build/base16-catppuccin-frappe.css index 50029c1..acf035c 100644 --- a/build/base16-catppuccin-frappe.css +++ b/build/base16-catppuccin-frappe.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a6d189; - --dnd-indicator: #e78284; - --idle-indicator: #e5c890; - --streaming-indicator: #ca9ee6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8caaee; - --accent-2: #8caaee; - --accent-3: #8caaee; - --accent-4: #81c8be; - --accent-5: #a6d189; - --mention: rgba(229, 200, 144, 0.1); - --mention-hover: rgba(229, 200, 144, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #303446; - --text-1: #f2d5cf; - --text-2: #f2d5cf; - --text-3: #c6d0f5; - --text-4: #626880; - --text-5: #51576d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #303446; /* Master background (Deepest) */ - --bg-3: #292c3c; /* Secondary background */ - --bg-2: #414559; /* Buttons and UI elements */ - --bg-1: #51576d; /* Active/Clicked states */ - - --hover: rgba(198, 208, 245, 0.05); - --active: rgba(198, 208, 245, 0.1); - --message-hover: rgba(198, 208, 245, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #303446 !important; - background: #8caaee !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-catppuccin-latte.css b/build/base16-catppuccin-latte.css index 12564fd..acf035c 100644 --- a/build/base16-catppuccin-latte.css +++ b/build/base16-catppuccin-latte.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #40a02b; - --dnd-indicator: #d20f39; - --idle-indicator: #df8e1d; - --streaming-indicator: #8839ef; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #1e66f5; - --accent-2: #1e66f5; - --accent-3: #1e66f5; - --accent-4: #179299; - --accent-5: #40a02b; - --mention: rgba(223, 142, 29, 0.1); - --mention-hover: rgba(223, 142, 29, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #eff1f5; - --text-1: #dc8a78; - --text-2: #dc8a78; - --text-3: #4c4f69; - --text-4: #acb0be; - --text-5: #bcc0cc; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #eff1f5; /* Master background (Deepest) */ - --bg-3: #e6e9ef; /* Secondary background */ - --bg-2: #ccd0da; /* Buttons and UI elements */ - --bg-1: #bcc0cc; /* Active/Clicked states */ - - --hover: rgba(76, 79, 105, 0.05); - --active: rgba(76, 79, 105, 0.1); - --message-hover: rgba(76, 79, 105, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #eff1f5 !important; - background: #1e66f5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-catppuccin-macchiato.css b/build/base16-catppuccin-macchiato.css index 481ded9..acf035c 100644 --- a/build/base16-catppuccin-macchiato.css +++ b/build/base16-catppuccin-macchiato.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a6da95; - --dnd-indicator: #ed8796; - --idle-indicator: #eed49f; - --streaming-indicator: #c6a0f6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8aadf4; - --accent-2: #8aadf4; - --accent-3: #8aadf4; - --accent-4: #8bd5ca; - --accent-5: #a6da95; - --mention: rgba(238, 212, 159, 0.1); - --mention-hover: rgba(238, 212, 159, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #24273a; - --text-1: #f4dbd6; - --text-2: #f4dbd6; - --text-3: #cad3f5; - --text-4: #5b6078; - --text-5: #494d64; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #24273a; /* Master background (Deepest) */ - --bg-3: #1e2030; /* Secondary background */ - --bg-2: #363a4f; /* Buttons and UI elements */ - --bg-1: #494d64; /* Active/Clicked states */ - - --hover: rgba(202, 211, 245, 0.05); - --active: rgba(202, 211, 245, 0.1); - --message-hover: rgba(202, 211, 245, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #24273a !important; - background: #8aadf4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-catppuccin-mocha.css b/build/base16-catppuccin-mocha.css index 6a4abed..acf035c 100644 --- a/build/base16-catppuccin-mocha.css +++ b/build/base16-catppuccin-mocha.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a6e3a1; - --dnd-indicator: #f38ba8; - --idle-indicator: #f9e2af; - --streaming-indicator: #cba6f7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #89b4fa; - --accent-2: #89b4fa; - --accent-3: #89b4fa; - --accent-4: #94e2d5; - --accent-5: #a6e3a1; - --mention: rgba(249, 226, 175, 0.1); - --mention-hover: rgba(249, 226, 175, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1e1e2e; - --text-1: #f5e0dc; - --text-2: #f5e0dc; - --text-3: #cdd6f4; - --text-4: #585b70; - --text-5: #45475a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1e1e2e; /* Master background (Deepest) */ - --bg-3: #181825; /* Secondary background */ - --bg-2: #313244; /* Buttons and UI elements */ - --bg-1: #45475a; /* Active/Clicked states */ - - --hover: rgba(205, 214, 244, 0.05); - --active: rgba(205, 214, 244, 0.1); - --message-hover: rgba(205, 214, 244, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1e1e2e !important; - background: #89b4fa !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cerulean-signal-dark.css b/build/base16-cerulean-signal-dark.css index f6802d2..acf035c 100644 --- a/build/base16-cerulean-signal-dark.css +++ b/build/base16-cerulean-signal-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #70e1b0; - --dnd-indicator: #ff8a9a; - --idle-indicator: #e2c85f; - --streaming-indicator: #ff74d4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7dd3ff; - --accent-2: #7dd3ff; - --accent-3: #7dd3ff; - --accent-4: #58d9df; - --accent-5: #70e1b0; - --mention: rgba(226, 200, 95, 0.1); - --mention-hover: rgba(226, 200, 95, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101722; - --text-1: #f1f6fc; - --text-2: #f1f6fc; - --text-3: #dce6f2; - --text-4: #aab8ca; - --text-5: #8fa0b5; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101722; /* Master background (Deepest) */ - --bg-3: #131c29; /* Secondary background */ - --bg-2: #173a5a; /* Buttons and UI elements */ - --bg-1: #8fa0b5; /* Active/Clicked states */ - - --hover: rgba(220, 230, 242, 0.05); - --active: rgba(220, 230, 242, 0.1); - --message-hover: rgba(220, 230, 242, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101722 !important; - background: #7dd3ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cerulean-signal-light.css b/build/base16-cerulean-signal-light.css index dfa4fbd..acf035c 100644 --- a/build/base16-cerulean-signal-light.css +++ b/build/base16-cerulean-signal-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #17795e; - --dnd-indicator: #b4233d; - --idle-indicator: #6f6300; - --streaming-indicator: #a0007d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #006fa8; - --accent-2: #006fa8; - --accent-3: #006fa8; - --accent-4: #00727e; - --accent-5: #17795e; - --mention: rgba(111, 99, 0, 0.1); - --mention-hover: rgba(111, 99, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f7f9fc; - --text-1: #202b3a; - --text-2: #202b3a; - --text-3: #232b38; - --text-4: #566579; - --text-5: #637287; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f7f9fc; /* Master background (Deepest) */ - --bg-3: #eef4fb; /* Secondary background */ - --bg-2: #dde7f1; /* Buttons and UI elements */ - --bg-1: #637287; /* Active/Clicked states */ - - --hover: rgba(35, 43, 56, 0.05); - --active: rgba(35, 43, 56, 0.1); - --message-hover: rgba(35, 43, 56, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f7f9fc !important; - background: #006fa8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chalk.css b/build/base16-chalk.css index 103a5d5..acf035c 100644 --- a/build/base16-chalk.css +++ b/build/base16-chalk.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #acc267; - --dnd-indicator: #fb9fb1; - --idle-indicator: #ddb26f; - --streaming-indicator: #e1a3ee; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6fc2ef; - --accent-2: #6fc2ef; - --accent-3: #6fc2ef; - --accent-4: #12cfc0; - --accent-5: #acc267; - --mention: rgba(221, 178, 111, 0.1); - --mention-hover: rgba(221, 178, 111, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #151515; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #b0b0b0; - --text-5: #505050; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #151515; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #505050; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #151515 !important; - background: #6fc2ef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-charcoal-dark.css b/build/base16-charcoal-dark.css index d393209..acf035c 100644 --- a/build/base16-charcoal-dark.css +++ b/build/base16-charcoal-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #dec8a7; - --dnd-indicator: #a88c62; - --idle-indicator: #dec8a7; - --streaming-indicator: #a88c62; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #c3a983; - --accent-2: #c3a983; - --accent-3: #c3a983; - --accent-4: #dec8a7; - --accent-5: #dec8a7; - --mention: rgba(222, 200, 167, 0.1); - --mention-hover: rgba(222, 200, 167, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0f0b05; - --text-1: #dec8a7; - --text-2: #dec8a7; - --text-3: #c3a983; - --text-4: #a88c62; - --text-5: #57462c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0f0b05; /* Master background (Deepest) */ - --bg-3: #231b0e; /* Secondary background */ - --bg-2: #2a2012; /* Buttons and UI elements */ - --bg-1: #57462c; /* Active/Clicked states */ - - --hover: rgba(195, 169, 131, 0.05); - --active: rgba(195, 169, 131, 0.1); - --message-hover: rgba(195, 169, 131, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0f0b05 !important; - background: #c3a983 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-charcoal-light.css b/build/base16-charcoal-light.css index 11d237d..acf035c 100644 --- a/build/base16-charcoal-light.css +++ b/build/base16-charcoal-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #110e06; - --dnd-indicator: #382e1b; - --idle-indicator: #110e06; - --streaming-indicator: #382e1b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #251e0f; - --accent-2: #251e0f; - --accent-3: #251e0f; - --accent-4: #110e06; - --accent-5: #110e06; - --mention: rgba(17, 14, 6, 0.1); - --mention-hover: rgba(17, 14, 6, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #cabda0; - --text-1: #4b3e26; - --text-2: #4b3e26; - --text-3: #382e1b; - --text-4: #110e06; - --text-5: #645538; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #cabda0; /* Master background (Deepest) */ - --bg-3: #bcad8c; /* Secondary background */ - --bg-2: #af9f7d; /* Buttons and UI elements */ - --bg-1: #645538; /* Active/Clicked states */ - - --hover: rgba(56, 46, 27, 0.05); - --active: rgba(56, 46, 27, 0.1); - --message-hover: rgba(56, 46, 27, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #cabda0 !important; - background: #251e0f !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chicago-day.css b/build/base16-chicago-day.css index be545ba..acf035c 100644 --- a/build/base16-chicago-day.css +++ b/build/base16-chicago-day.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #009b3a; - --dnd-indicator: #c60c30; - --idle-indicator: #968400; - --streaming-indicator: #e27ea6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #522398; - --accent-2: #522398; - --accent-3: #522398; - --accent-4: #00a1de; - --accent-5: #009b3a; - --mention: rgba(150, 132, 0, 0.1); - --mention-hover: rgba(150, 132, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e8f0ea; - --text-1: #2a3b32; - --text-2: #2a3b32; - --text-3: #364c40; - --text-4: #4b5a51; - --text-5: #8a9a91; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e8f0ea; /* Master background (Deepest) */ - --bg-3: #d1e0d7; /* Secondary background */ - --bg-2: #b9d0c3; /* Buttons and UI elements */ - --bg-1: #8a9a91; /* Active/Clicked states */ - - --hover: rgba(54, 76, 64, 0.05); - --active: rgba(54, 76, 64, 0.1); - --message-hover: rgba(54, 76, 64, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e8f0ea !important; - background: #522398 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chicago-night.css b/build/base16-chicago-night.css index fb07c25..acf035c 100644 --- a/build/base16-chicago-night.css +++ b/build/base16-chicago-night.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #009b3a; - --dnd-indicator: #c60c30; - --idle-indicator: #f9e300; - --streaming-indicator: #e27ea6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #522398; - --accent-2: #522398; - --accent-3: #522398; - --accent-4: #00a1de; - --accent-5: #009b3a; - --mention: rgba(249, 227, 0, 0.1); - --mention-hover: rgba(249, 227, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1e2a24; - --text-1: #c1cdc7; - --text-2: #c1cdc7; - --text-3: #a7b8af; - --text-4: #8a9a91; - --text-5: #5f7368; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1e2a24; /* Master background (Deepest) */ - --bg-3: #2a3b32; /* Secondary background */ - --bg-2: #364c40; /* Buttons and UI elements */ - --bg-1: #5f7368; /* Active/Clicked states */ - - --hover: rgba(167, 184, 175, 0.05); - --active: rgba(167, 184, 175, 0.1); - --message-hover: rgba(167, 184, 175, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1e2a24 !important; - background: #522398 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chinoiserie-midnight.css b/build/base16-chinoiserie-midnight.css index e0325f1..acf035c 100644 --- a/build/base16-chinoiserie-midnight.css +++ b/build/base16-chinoiserie-midnight.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #aeb831; - --dnd-indicator: #ed5a56; - --idle-indicator: #fbb957; - --streaming-indicator: #cf8997; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #81a2a2; - --accent-2: #81a2a2; - --accent-3: #81a2a2; - --accent-4: #88b68d; - --accent-5: #aeb831; - --mention: rgba(251, 185, 87, 0.1); - --mention-hover: rgba(251, 185, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1d1d; - --text-1: #eee7f2; - --text-2: #eee7f2; - --text-3: #c4cbcf; - --text-4: #bdaead; - --text-5: #918072; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1d1d; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #373737; /* Buttons and UI elements */ - --bg-1: #918072; /* Active/Clicked states */ - - --hover: rgba(196, 203, 207, 0.05); - --active: rgba(196, 203, 207, 0.1); - --message-hover: rgba(196, 203, 207, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1d1d !important; - background: #81a2a2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chinoiserie-morandi.css b/build/base16-chinoiserie-morandi.css index 1a6c549..acf035c 100644 --- a/build/base16-chinoiserie-morandi.css +++ b/build/base16-chinoiserie-morandi.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8ca07b; - --dnd-indicator: #c06061; - --idle-indicator: #e5bc84; - --streaming-indicator: #98a1d8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #839ec9; - --accent-2: #839ec9; - --accent-3: #839ec9; - --accent-4: #5e8c9b; - --accent-5: #8ca07b; - --mention: rgba(229, 188, 132, 0.1); - --mention-hover: rgba(229, 188, 132, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1d1d; - --text-1: #eee7f2; - --text-2: #eee7f2; - --text-3: #c4cbcf; - --text-4: #bdaead; - --text-5: #918072; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1d1d; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #373737; /* Buttons and UI elements */ - --bg-1: #918072; /* Active/Clicked states */ - - --hover: rgba(196, 203, 207, 0.05); - --active: rgba(196, 203, 207, 0.1); - --message-hover: rgba(196, 203, 207, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1d1d !important; - background: #839ec9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chinoiserie-night.css b/build/base16-chinoiserie-night.css index e23ed0a..acf035c 100644 --- a/build/base16-chinoiserie-night.css +++ b/build/base16-chinoiserie-night.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b2cf87; - --dnd-indicator: #f07c82; - --idle-indicator: #f4ce69; - --streaming-indicator: #be9db9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8fb2c9; - --accent-2: #8fb2c9; - --accent-3: #8fb2c9; - --accent-4: #b0d5df; - --accent-5: #b2cf87; - --mention: rgba(244, 206, 105, 0.1); - --mention-hover: rgba(244, 206, 105, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1d1d; - --text-1: #eee7f2; - --text-2: #eee7f2; - --text-3: #c4cbcf; - --text-4: #bdaead; - --text-5: #918072; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1d1d; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #373737; /* Buttons and UI elements */ - --bg-1: #918072; /* Active/Clicked states */ - - --hover: rgba(196, 203, 207, 0.05); - --active: rgba(196, 203, 207, 0.1); - --message-hover: rgba(196, 203, 207, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1d1d !important; - background: #8fb2c9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-chinoiserie.css b/build/base16-chinoiserie.css index 8640a42..acf035c 100644 --- a/build/base16-chinoiserie.css +++ b/build/base16-chinoiserie.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #428675; - --dnd-indicator: #c04851; - --idle-indicator: #d6a01d; - --streaming-indicator: #c08eaf; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #815c94; - --accent-2: #815c94; - --accent-3: #815c94; - --accent-4: #2b73af; - --accent-5: #428675; - --mention: rgba(214, 160, 29, 0.1); - --mention-hover: rgba(214, 160, 29, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #2f2f35; - --text-2: #2f2f35; - --text-3: #4a4035; - --text-4: #918072; - --text-5: #80766e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #d6d6d6; /* Buttons and UI elements */ - --bg-1: #80766e; /* Active/Clicked states */ - - --hover: rgba(74, 64, 53, 0.05); - --active: rgba(74, 64, 53, 0.1); - --message-hover: rgba(74, 64, 53, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #815c94 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-circus.css b/build/base16-circus.css index 95aecc1..acf035c 100644 --- a/build/base16-circus.css +++ b/build/base16-circus.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #84b97c; - --dnd-indicator: #dc657d; - --idle-indicator: #c3ba63; - --streaming-indicator: #b888e2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #639ee4; - --accent-2: #639ee4; - --accent-3: #639ee4; - --accent-4: #4bb1a7; - --accent-5: #84b97c; - --mention: rgba(195, 186, 99, 0.1); - --mention-hover: rgba(195, 186, 99, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #191919; - --text-1: #808080; - --text-2: #808080; - --text-3: #a7a7a7; - --text-4: #505050; - --text-5: #5f5a60; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #191919; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #5f5a60; /* Active/Clicked states */ - - --hover: rgba(167, 167, 167, 0.05); - --active: rgba(167, 167, 167, 0.1); - --message-hover: rgba(167, 167, 167, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #191919 !important; - background: #639ee4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-classic-dark.css b/build/base16-classic-dark.css index a2711fb..acf035c 100644 --- a/build/base16-classic-dark.css +++ b/build/base16-classic-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #90a959; - --dnd-indicator: #ac4142; - --idle-indicator: #f4bf75; - --streaming-indicator: #aa759f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6a9fb5; - --accent-2: #6a9fb5; - --accent-3: #6a9fb5; - --accent-4: #75b5aa; - --accent-5: #90a959; - --mention: rgba(244, 191, 117, 0.1); - --mention-hover: rgba(244, 191, 117, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #151515; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #b0b0b0; - --text-5: #505050; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #151515; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #505050; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #151515 !important; - background: #6a9fb5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-classic-light.css b/build/base16-classic-light.css index fbcd570..acf035c 100644 --- a/build/base16-classic-light.css +++ b/build/base16-classic-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #90a959; - --dnd-indicator: #ac4142; - --idle-indicator: #f4bf75; - --streaming-indicator: #aa759f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6a9fb5; - --accent-2: #6a9fb5; - --accent-3: #6a9fb5; - --accent-4: #75b5aa; - --accent-5: #90a959; - --mention: rgba(244, 191, 117, 0.1); - --mention-hover: rgba(244, 191, 117, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f5f5; - --text-1: #202020; - --text-2: #202020; - --text-3: #303030; - --text-4: #505050; - --text-5: #b0b0b0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f5f5; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #d0d0d0; /* Buttons and UI elements */ - --bg-1: #b0b0b0; /* Active/Clicked states */ - - --hover: rgba(48, 48, 48, 0.05); - --active: rgba(48, 48, 48, 0.1); - --message-hover: rgba(48, 48, 48, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f5f5 !important; - background: #6a9fb5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-codeschool.css b/build/base16-codeschool.css index 30501b8..acf035c 100644 --- a/build/base16-codeschool.css +++ b/build/base16-codeschool.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #237986; - --dnd-indicator: #2a5491; - --idle-indicator: #a03b1e; - --streaming-indicator: #c59820; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #484d79; - --accent-2: #484d79; - --accent-3: #484d79; - --accent-4: #b02f30; - --accent-5: #237986; - --mention: rgba(160, 59, 30, 0.1); - --mention-hover: rgba(160, 59, 30, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #232c31; - --text-1: #a7cfa3; - --text-2: #a7cfa3; - --text-3: #9ea7a6; - --text-4: #84898c; - --text-5: #3f4944; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #232c31; /* Master background (Deepest) */ - --bg-3: #1c3657; /* Secondary background */ - --bg-2: #2a343a; /* Buttons and UI elements */ - --bg-1: #3f4944; /* Active/Clicked states */ - - --hover: rgba(158, 167, 166, 0.05); - --active: rgba(158, 167, 166, 0.1); - --message-hover: rgba(158, 167, 166, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #232c31 !important; - background: #484d79 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-colors.css b/build/base16-colors.css index 22b3748..acf035c 100644 --- a/build/base16-colors.css +++ b/build/base16-colors.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2ecc40; - --dnd-indicator: #ff4136; - --idle-indicator: #ffdc00; - --streaming-indicator: #b10dc9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0074d9; - --accent-2: #0074d9; - --accent-3: #0074d9; - --accent-4: #7fdbff; - --accent-5: #2ecc40; - --mention: rgba(255, 220, 0, 0.1); - --mention-hover: rgba(255, 220, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #111111; - --text-1: #dddddd; - --text-2: #dddddd; - --text-3: #bbbbbb; - --text-4: #999999; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #111111; /* Master background (Deepest) */ - --bg-3: #333333; /* Secondary background */ - --bg-2: #555555; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(187, 187, 187, 0.05); - --active: rgba(187, 187, 187, 0.1); - --message-hover: rgba(187, 187, 187, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #111111 !important; - background: #0074d9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-corduroy-dark.css b/build/base16-corduroy-dark.css new file mode 100644 index 0000000..acf035c --- /dev/null +++ b/build/base16-corduroy-dark.css @@ -0,0 +1,475 @@ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ + + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } + + /* Copyright (c) 2025 Cole Schaefer + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ + + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } + + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } + + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } + + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-corduroy.css b/build/base16-corduroy.css new file mode 100644 index 0000000..acf035c --- /dev/null +++ b/build/base16-corduroy.css @@ -0,0 +1,475 @@ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ + + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } + + /* Copyright (c) 2025 Cole Schaefer + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ + + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } + + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } + + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } + + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cupcake.css b/build/base16-cupcake.css index ee77af4..acf035c 100644 --- a/build/base16-cupcake.css +++ b/build/base16-cupcake.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a3b367; - --dnd-indicator: #d57e85; - --idle-indicator: #dcb16c; - --streaming-indicator: #bb99b4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7297b9; - --accent-2: #7297b9; - --accent-3: #7297b9; - --accent-4: #69a9a7; - --accent-5: #a3b367; - --mention: rgba(220, 177, 108, 0.1); - --mention-hover: rgba(220, 177, 108, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbf1f2; - --text-1: #72677e; - --text-2: #72677e; - --text-3: #8b8198; - --text-4: #a59daf; - --text-5: #bfb9c6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbf1f2; /* Master background (Deepest) */ - --bg-3: #f2f1f4; /* Secondary background */ - --bg-2: #d8d5dd; /* Buttons and UI elements */ - --bg-1: #bfb9c6; /* Active/Clicked states */ - - --hover: rgba(139, 129, 152, 0.05); - --active: rgba(139, 129, 152, 0.1); - --message-hover: rgba(139, 129, 152, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbf1f2 !important; - background: #7297b9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cupertino.css b/build/base16-cupertino.css index cde7bee..acf035c 100644 --- a/build/base16-cupertino.css +++ b/build/base16-cupertino.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #007400; - --dnd-indicator: #c41a15; - --idle-indicator: #826b28; - --streaming-indicator: #a90d91; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0000ff; - --accent-2: #0000ff; - --accent-3: #0000ff; - --accent-4: #318495; - --accent-5: #007400; - --mention: rgba(130, 107, 40, 0.1); - --mention-hover: rgba(130, 107, 40, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #404040; - --text-2: #404040; - --text-3: #404040; - --text-4: #808080; - --text-5: #808080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #c0c0c0; /* Secondary background */ - --bg-2: #c0c0c0; /* Buttons and UI elements */ - --bg-1: #808080; /* Active/Clicked states */ - - --hover: rgba(64, 64, 64, 0.05); - --active: rgba(64, 64, 64, 0.1); - --message-hover: rgba(64, 64, 64, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #0000ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-cyberpunk.css b/build/base16-cyberpunk.css index 8c40b13..acf035c 100644 --- a/build/base16-cyberpunk.css +++ b/build/base16-cyberpunk.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #61ce3c; - --dnd-indicator: #ff0000; - --idle-indicator: #ffff00; - --streaming-indicator: #ff1493; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4c83ff; - --accent-2: #4c83ff; - --accent-3: #4c83ff; - --accent-4: #93e0e3; - --accent-5: #61ce3c; - --mention: rgba(255, 255, 0, 0.1); - --mention-hover: rgba(255, 255, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #f8f8f8; - --text-2: #f8f8f8; - --text-3: #dcdccc; - --text-4: #8b8989; - --text-5: #4f4f4f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #2b2b2b; /* Secondary background */ - --bg-2: #383838; /* Buttons and UI elements */ - --bg-1: #4f4f4f; /* Active/Clicked states */ - - --hover: rgba(220, 220, 204, 0.05); - --active: rgba(220, 220, 204, 0.1); - --message-hover: rgba(220, 220, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #4c83ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-black.css b/build/base16-da-one-black.css index 3e27b85..acf035c 100644 --- a/build/base16-da-one-black.css +++ b/build/base16-da-one-black.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98c379; - --dnd-indicator: #fa7883; - --idle-indicator: #ff9470; - --streaming-indicator: #e799ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6bb8ff; - --accent-2: #6bb8ff; - --accent-3: #6bb8ff; - --accent-4: #8af5ff; - --accent-5: #98c379; - --mention: rgba(255, 148, 112, 0.1); - --mention-hover: rgba(255, 148, 112, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #ffffff; - --text-4: #c8c8c8; - --text-5: #888888; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #585858; /* Buttons and UI elements */ - --bg-1: #888888; /* Active/Clicked states */ - - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --message-hover: rgba(255, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #6bb8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-gray.css b/build/base16-da-one-gray.css index 82a9100..acf035c 100644 --- a/build/base16-da-one-gray.css +++ b/build/base16-da-one-gray.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98c379; - --dnd-indicator: #fa7883; - --idle-indicator: #ff9470; - --streaming-indicator: #e799ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6bb8ff; - --accent-2: #6bb8ff; - --accent-3: #6bb8ff; - --accent-4: #8af5ff; - --accent-5: #98c379; - --mention: rgba(255, 148, 112, 0.1); - --mention-hover: rgba(255, 148, 112, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181818; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #ffffff; - --text-4: #c8c8c8; - --text-5: #888888; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181818; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #585858; /* Buttons and UI elements */ - --bg-1: #888888; /* Active/Clicked states */ - - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --message-hover: rgba(255, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181818 !important; - background: #6bb8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-ocean.css b/build/base16-da-one-ocean.css index 82c9e2a..acf035c 100644 --- a/build/base16-da-one-ocean.css +++ b/build/base16-da-one-ocean.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98c379; - --dnd-indicator: #fa7883; - --idle-indicator: #ff9470; - --streaming-indicator: #e799ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6bb8ff; - --accent-2: #6bb8ff; - --accent-3: #6bb8ff; - --accent-4: #8af5ff; - --accent-5: #98c379; - --mention: rgba(255, 148, 112, 0.1); - --mention-hover: rgba(255, 148, 112, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171726; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #ffffff; - --text-4: #c8c8c8; - --text-5: #878d96; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171726; /* Master background (Deepest) */ - --bg-3: #22273d; /* Secondary background */ - --bg-2: #525866; /* Buttons and UI elements */ - --bg-1: #878d96; /* Active/Clicked states */ - - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --message-hover: rgba(255, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171726 !important; - background: #6bb8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-paper.css b/build/base16-da-one-paper.css index 5b84e68..acf035c 100644 --- a/build/base16-da-one-paper.css +++ b/build/base16-da-one-paper.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #76a85d; - --dnd-indicator: #de5d6e; - --idle-indicator: #b3684f; - --streaming-indicator: #c173d1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5890f8; - --accent-2: #5890f8; - --accent-3: #5890f8; - --accent-4: #64b5a7; - --accent-5: #76a85d; - --mention: rgba(179, 104, 79, 0.1); - --mention-hover: rgba(179, 104, 79, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #faf0dc; - --text-1: #000000; - --text-2: #000000; - --text-3: #181818; - --text-4: #282828; - --text-5: #585858; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #faf0dc; /* Master background (Deepest) */ - --bg-3: #c8c8c8; /* Secondary background */ - --bg-2: #888888; /* Buttons and UI elements */ - --bg-1: #585858; /* Active/Clicked states */ - - --hover: rgba(24, 24, 24, 0.05); - --active: rgba(24, 24, 24, 0.1); - --message-hover: rgba(24, 24, 24, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #faf0dc !important; - background: #5890f8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-sea.css b/build/base16-da-one-sea.css index 097d2c4..acf035c 100644 --- a/build/base16-da-one-sea.css +++ b/build/base16-da-one-sea.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98c379; - --dnd-indicator: #fa7883; - --idle-indicator: #ff9470; - --streaming-indicator: #e799ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6bb8ff; - --accent-2: #6bb8ff; - --accent-3: #6bb8ff; - --accent-4: #8af5ff; - --accent-5: #98c379; - --mention: rgba(255, 148, 112, 0.1); - --mention-hover: rgba(255, 148, 112, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #22273d; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #ffffff; - --text-4: #c8c8c8; - --text-5: #878d96; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #22273d; /* Master background (Deepest) */ - --bg-3: #374059; /* Secondary background */ - --bg-2: #525866; /* Buttons and UI elements */ - --bg-1: #878d96; /* Active/Clicked states */ - - --hover: rgba(255, 255, 255, 0.05); - --active: rgba(255, 255, 255, 0.1); - --message-hover: rgba(255, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #22273d !important; - background: #6bb8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-da-one-white.css b/build/base16-da-one-white.css index 3b82cf0..acf035c 100644 --- a/build/base16-da-one-white.css +++ b/build/base16-da-one-white.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #76a85d; - --dnd-indicator: #de5d6e; - --idle-indicator: #b3684f; - --streaming-indicator: #c173d1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5890f8; - --accent-2: #5890f8; - --accent-3: #5890f8; - --accent-4: #64b5a7; - --accent-5: #76a85d; - --mention: rgba(179, 104, 79, 0.1); - --mention-hover: rgba(179, 104, 79, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #000000; - --text-2: #000000; - --text-3: #181818; - --text-4: #282828; - --text-5: #585858; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #c8c8c8; /* Secondary background */ - --bg-2: #888888; /* Buttons and UI elements */ - --bg-1: #585858; /* Active/Clicked states */ - - --hover: rgba(24, 24, 24, 0.05); - --active: rgba(24, 24, 24, 0.1); - --message-hover: rgba(24, 24, 24, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #5890f8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-danqing-light.css b/build/base16-danqing-light.css index 1febadc..acf035c 100644 --- a/build/base16-danqing-light.css +++ b/build/base16-danqing-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8ab361; - --dnd-indicator: #f9906f; - --idle-indicator: #f0c239; - --streaming-indicator: #cca4e3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b0a4e3; - --accent-2: #b0a4e3; - --accent-3: #b0a4e3; - --accent-4: #30dff3; - --accent-5: #8ab361; - --mention: rgba(240, 194, 57, 0.1); - --mention-hover: rgba(240, 194, 57, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fcfefd; - --text-1: #434846; - --text-2: #434846; - --text-3: #5a605d; - --text-4: #9da8a3; - --text-5: #cad8d2; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fcfefd; /* Master background (Deepest) */ - --bg-3: #ecf6f2; /* Secondary background */ - --bg-2: #e0f0ef; /* Buttons and UI elements */ - --bg-1: #cad8d2; /* Active/Clicked states */ - - --hover: rgba(90, 96, 93, 0.05); - --active: rgba(90, 96, 93, 0.1); - --message-hover: rgba(90, 96, 93, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fcfefd !important; - background: #b0a4e3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-danqing.css b/build/base16-danqing.css index b870f9c..acf035c 100644 --- a/build/base16-danqing.css +++ b/build/base16-danqing.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8ab361; - --dnd-indicator: #f9906f; - --idle-indicator: #f0c239; - --streaming-indicator: #cca4e3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b0a4e3; - --accent-2: #b0a4e3; - --accent-3: #b0a4e3; - --accent-4: #30dff3; - --accent-5: #8ab361; - --mention: rgba(240, 194, 57, 0.1); - --mention-hover: rgba(240, 194, 57, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d302f; - --text-1: #ecf6f2; - --text-2: #ecf6f2; - --text-3: #e0f0ef; - --text-4: #cad8d2; - --text-5: #9da8a3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d302f; /* Master background (Deepest) */ - --bg-3: #434846; /* Secondary background */ - --bg-2: #5a605d; /* Buttons and UI elements */ - --bg-1: #9da8a3; /* Active/Clicked states */ - - --hover: rgba(224, 240, 239, 0.05); - --active: rgba(224, 240, 239, 0.1); - --message-hover: rgba(224, 240, 239, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d302f !important; - background: #b0a4e3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-darcula.css b/build/base16-darcula.css index 94949ab..acf035c 100644 --- a/build/base16-darcula.css +++ b/build/base16-darcula.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6a8759; - --dnd-indicator: #4eade5; - --idle-indicator: #bbb529; - --streaming-indicator: #cc7832; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #9876aa; - --accent-2: #9876aa; - --accent-3: #9876aa; - --accent-4: #629755; - --accent-5: #6a8759; - --mention: rgba(187, 181, 41, 0.1); - --mention-hover: rgba(187, 181, 41, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2b2b2b; - --text-1: #ffc66d; - --text-2: #ffc66d; - --text-3: #a9b7c6; - --text-4: #a4a3a3; - --text-5: #606366; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2b2b2b; /* Master background (Deepest) */ - --bg-3: #323232; /* Secondary background */ - --bg-2: #323232; /* Buttons and UI elements */ - --bg-1: #606366; /* Active/Clicked states */ - - --hover: rgba(169, 183, 198, 0.05); - --active: rgba(169, 183, 198, 0.1); - --message-hover: rgba(169, 183, 198, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2b2b2b !important; - background: #9876aa !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-darkmoss.css b/build/base16-darkmoss.css index 26891a9..acf035c 100644 --- a/build/base16-darkmoss.css +++ b/build/base16-darkmoss.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #499180; - --dnd-indicator: #ff4658; - --idle-indicator: #fdb11f; - --streaming-indicator: #9bc0c8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #498091; - --accent-2: #498091; - --accent-3: #498091; - --accent-4: #66d9ef; - --accent-5: #499180; - --mention: rgba(253, 177, 31, 0.1); - --mention-hover: rgba(253, 177, 31, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171e1f; - --text-1: #e3e3c8; - --text-2: #e3e3c8; - --text-3: #c7c7a5; - --text-4: #818f80; - --text-5: #555e5f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171e1f; /* Master background (Deepest) */ - --bg-3: #252c2d; /* Secondary background */ - --bg-2: #373c3d; /* Buttons and UI elements */ - --bg-1: #555e5f; /* Active/Clicked states */ - - --hover: rgba(199, 199, 165, 0.05); - --active: rgba(199, 199, 165, 0.1); - --message-hover: rgba(199, 199, 165, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171e1f !important; - background: #498091 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-darktooth.css b/build/base16-darktooth.css index 4c6608c..acf035c 100644 --- a/build/base16-darktooth.css +++ b/build/base16-darktooth.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95c085; - --dnd-indicator: #fb543f; - --idle-indicator: #fac03b; - --streaming-indicator: #8f4673; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0d6678; - --accent-2: #0d6678; - --accent-3: #0d6678; - --accent-4: #8ba59b; - --accent-5: #95c085; - --mention: rgba(250, 192, 59, 0.1); - --mention-hover: rgba(250, 192, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d2021; - --text-1: #d5c4a1; - --text-2: #d5c4a1; - --text-3: #a89984; - --text-4: #928374; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d2021; /* Master background (Deepest) */ - --bg-3: #32302f; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(168, 153, 132, 0.05); - --active: rgba(168, 153, 132, 0.1); - --message-hover: rgba(168, 153, 132, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d2021 !important; - background: #0d6678 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-darkviolet.css b/build/base16-darkviolet.css index dbb5ddb..acf035c 100644 --- a/build/base16-darkviolet.css +++ b/build/base16-darkviolet.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4595e6; - --dnd-indicator: #a82ee6; - --idle-indicator: #f29df2; - --streaming-indicator: #7e5ce6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4136d9; - --accent-2: #4136d9; - --accent-3: #4136d9; - --accent-4: #40dfff; - --accent-5: #4595e6; - --mention: rgba(242, 157, 242, 0.1); - --mention-hover: rgba(242, 157, 242, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #9045e6; - --text-2: #9045e6; - --text-3: #b08ae6; - --text-4: #00ff00; - --text-5: #593380; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #231a40; /* Secondary background */ - --bg-2: #432d59; /* Buttons and UI elements */ - --bg-1: #593380; /* Active/Clicked states */ - - --hover: rgba(176, 138, 230, 0.05); - --active: rgba(176, 138, 230, 0.1); - --message-hover: rgba(176, 138, 230, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #4136d9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-decaf.css b/build/base16-decaf.css index 6b1511d..acf035c 100644 --- a/build/base16-decaf.css +++ b/build/base16-decaf.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #beda78; - --dnd-indicator: #ff7f7b; - --idle-indicator: #ffd67c; - --streaming-indicator: #efb3f7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #90bee1; - --accent-2: #90bee1; - --accent-3: #90bee1; - --accent-4: #bed6ff; - --accent-5: #beda78; - --mention: rgba(255, 214, 124, 0.1); - --mention-hover: rgba(255, 214, 124, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d2d2d; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #cccccc; - --text-4: #b4b7b4; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d2d2d; /* Master background (Deepest) */ - --bg-3: #393939; /* Secondary background */ - --bg-2: #515151; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(204, 204, 204, 0.05); - --active: rgba(204, 204, 204, 0.1); - --message-hover: rgba(204, 204, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d2d2d !important; - background: #90bee1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-deep-oceanic-next.css b/build/base16-deep-oceanic-next.css index 8f87e27..acf035c 100644 --- a/build/base16-deep-oceanic-next.css +++ b/build/base16-deep-oceanic-next.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #63b784; - --dnd-indicator: #d3464d; - --idle-indicator: #f3b863; - --streaming-indicator: #8b66d6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #568ccf; - --accent-2: #568ccf; - --accent-3: #568ccf; - --accent-4: #4fb7ae; - --accent-5: #63b784; - --mention: rgba(243, 184, 99, 0.1); - --mention-hover: rgba(243, 184, 99, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #001c1f; - --text-1: #e0e9ef; - --text-2: #e0e9ef; - --text-3: #d4e1e8; - --text-4: #0093a3; - --text-5: #004852; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #001c1f; /* Master background (Deepest) */ - --bg-3: #002931; /* Secondary background */ - --bg-2: #003640; /* Buttons and UI elements */ - --bg-1: #004852; /* Active/Clicked states */ - - --hover: rgba(212, 225, 232, 0.05); - --active: rgba(212, 225, 232, 0.1); - --message-hover: rgba(212, 225, 232, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #001c1f !important; - background: #568ccf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-default-dark.css b/build/base16-default-dark.css index 8fcd68f..acf035c 100644 --- a/build/base16-default-dark.css +++ b/build/base16-default-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a1b56c; - --dnd-indicator: #ab4642; - --idle-indicator: #f7ca88; - --streaming-indicator: #ba8baf; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7cafc2; - --accent-2: #7cafc2; - --accent-3: #7cafc2; - --accent-4: #86c1b9; - --accent-5: #a1b56c; - --mention: rgba(247, 202, 136, 0.1); - --mention-hover: rgba(247, 202, 136, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181818; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #d8d8d8; - --text-4: #b8b8b8; - --text-5: #585858; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181818; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #383838; /* Buttons and UI elements */ - --bg-1: #585858; /* Active/Clicked states */ - - --hover: rgba(216, 216, 216, 0.05); - --active: rgba(216, 216, 216, 0.1); - --message-hover: rgba(216, 216, 216, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181818 !important; - background: #7cafc2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-default-light.css b/build/base16-default-light.css index e42a38b..acf035c 100644 --- a/build/base16-default-light.css +++ b/build/base16-default-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a1b56c; - --dnd-indicator: #ab4642; - --idle-indicator: #f7ca88; - --streaming-indicator: #ba8baf; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7cafc2; - --accent-2: #7cafc2; - --accent-3: #7cafc2; - --accent-4: #86c1b9; - --accent-5: #a1b56c; - --mention: rgba(247, 202, 136, 0.1); - --mention-hover: rgba(247, 202, 136, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f8f8f8; - --text-1: #282828; - --text-2: #282828; - --text-3: #383838; - --text-4: #585858; - --text-5: #b8b8b8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f8f8f8; /* Master background (Deepest) */ - --bg-3: #e8e8e8; /* Secondary background */ - --bg-2: #d8d8d8; /* Buttons and UI elements */ - --bg-1: #b8b8b8; /* Active/Clicked states */ - - --hover: rgba(56, 56, 56, 0.05); - --active: rgba(56, 56, 56, 0.1); - --message-hover: rgba(56, 56, 56, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f8f8f8 !important; - background: #7cafc2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-digital-rain.css b/build/base16-digital-rain.css index 6964700..acf035c 100644 --- a/build/base16-digital-rain.css +++ b/build/base16-digital-rain.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #64c83c; - --dnd-indicator: #c85a46; - --idle-indicator: #a67a50; - --streaming-indicator: #9472b4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5482af; - --accent-2: #5482af; - --accent-3: #5482af; - --accent-4: #468c78; - --accent-5: #64c83c; - --mention: rgba(166, 122, 80, 0.1); - --mention-hover: rgba(166, 122, 80, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #c4cec4; - --text-2: #c4cec4; - --text-3: #00ff00; - --text-4: #919893; - --text-5: #7c8d7c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #4a806c; /* Secondary background */ - --bg-2: #4a8d7e; /* Buttons and UI elements */ - --bg-1: #7c8d7c; /* Active/Clicked states */ - - --hover: rgba(0, 255, 0, 0.05); - --active: rgba(0, 255, 0, 0.1); - --message-hover: rgba(0, 255, 0, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #5482af !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-dirtysea.css b/build/base16-dirtysea.css index e8bf28d..acf035c 100644 --- a/build/base16-dirtysea.css +++ b/build/base16-dirtysea.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #730073; - --dnd-indicator: #840000; - --idle-indicator: #755b00; - --streaming-indicator: #000090; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #007300; - --accent-2: #007300; - --accent-3: #007300; - --accent-4: #755b00; - --accent-5: #730073; - --mention: rgba(117, 91, 0, 0.1); - --mention-hover: rgba(117, 91, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e0e0e0; - --text-1: #f8f8f8; - --text-2: #f8f8f8; - --text-3: #000000; - --text-4: #202020; - --text-5: #707070; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e0e0e0; /* Master background (Deepest) */ - --bg-3: #d0dad0; /* Secondary background */ - --bg-2: #d0d0d0; /* Buttons and UI elements */ - --bg-1: #707070; /* Active/Clicked states */ - - --hover: rgba(0, 0, 0, 0.05); - --active: rgba(0, 0, 0, 0.1); - --message-hover: rgba(0, 0, 0, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e0e0e0 !important; - background: #007300 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-dracula.css b/build/base16-dracula.css index 8e3e1ae..acf035c 100644 --- a/build/base16-dracula.css +++ b/build/base16-dracula.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #50fa7b; - --dnd-indicator: #ff5555; - --idle-indicator: #f1fa8c; - --streaming-indicator: #ff79c6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #bd93f9; - --accent-2: #bd93f9; - --accent-3: #bd93f9; - --accent-4: #8be9fd; - --accent-5: #50fa7b; - --mention: rgba(241, 250, 140, 0.1); - --mention-hover: rgba(241, 250, 140, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282a36; - --text-1: #f8f8f2; - --text-2: #f8f8f2; - --text-3: #f8f8f2; - --text-4: #9ea8c7; - --text-5: #6272a4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282a36; /* Master background (Deepest) */ - --bg-3: #21222c; /* Secondary background */ - --bg-2: #44475a; /* Buttons and UI elements */ - --bg-1: #6272a4; /* Active/Clicked states */ - - --hover: rgba(248, 248, 242, 0.05); - --active: rgba(248, 248, 242, 0.1); - --message-hover: rgba(248, 248, 242, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282a36 !important; - background: #bd93f9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-edge-dark.css b/build/base16-edge-dark.css index 6906fef..acf035c 100644 --- a/build/base16-edge-dark.css +++ b/build/base16-edge-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a1bf78; - --dnd-indicator: #e77171; - --idle-indicator: #dbb774; - --streaming-indicator: #d390e7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #73b3e7; - --accent-2: #73b3e7; - --accent-3: #73b3e7; - --accent-4: #5ebaa5; - --accent-5: #a1bf78; - --mention: rgba(219, 183, 116, 0.1); - --mention-hover: rgba(219, 183, 116, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #262729; - --text-1: #caccce; - --text-2: #caccce; - --text-3: #afb2b5; - --text-4: #95989d; - --text-5: #4a4c4f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #262729; /* Master background (Deepest) */ - --bg-3: #313235; /* Secondary background */ - --bg-2: #3d3f42; /* Buttons and UI elements */ - --bg-1: #4a4c4f; /* Active/Clicked states */ - - --hover: rgba(175, 178, 181, 0.05); - --active: rgba(175, 178, 181, 0.1); - --message-hover: rgba(175, 178, 181, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #262729 !important; - background: #73b3e7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-edge-light.css b/build/base16-edge-light.css index ce3a577..acf035c 100644 --- a/build/base16-edge-light.css +++ b/build/base16-edge-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7c9f4b; - --dnd-indicator: #db7070; - --idle-indicator: #ebcc1a; - --streaming-indicator: #b870ce; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6587bf; - --accent-2: #6587bf; - --accent-3: #6587bf; - --accent-4: #509c93; - --accent-5: #7c9f4b; - --mention: rgba(235, 204, 26, 0.1); - --mention-hover: rgba(235, 204, 26, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fafafa; - --text-1: #3a3a46; - --text-2: #3a3a46; - --text-3: #474752; - --text-4: #5e646f; - --text-5: #9197a1; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fafafa; /* Master background (Deepest) */ - --bg-3: #e3e5e8; /* Secondary background */ - --bg-2: #acb1b9; /* Buttons and UI elements */ - --bg-1: #9197a1; /* Active/Clicked states */ - - --hover: rgba(71, 71, 82, 0.05); - --active: rgba(71, 71, 82, 0.1); - --message-hover: rgba(71, 71, 82, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fafafa !important; - background: #6587bf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-eighties.css b/build/base16-eighties.css index 863b628..acf035c 100644 --- a/build/base16-eighties.css +++ b/build/base16-eighties.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #99cc99; - --dnd-indicator: #f2777a; - --idle-indicator: #ffcc66; - --streaming-indicator: #cc99cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6699cc; - --accent-2: #6699cc; - --accent-3: #6699cc; - --accent-4: #66cccc; - --accent-5: #99cc99; - --mention: rgba(255, 204, 102, 0.1); - --mention-hover: rgba(255, 204, 102, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d2d2d; - --text-1: #e8e6df; - --text-2: #e8e6df; - --text-3: #d3d0c8; - --text-4: #a09f93; - --text-5: #747369; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d2d2d; /* Master background (Deepest) */ - --bg-3: #393939; /* Secondary background */ - --bg-2: #515151; /* Buttons and UI elements */ - --bg-1: #747369; /* Active/Clicked states */ - - --hover: rgba(211, 208, 200, 0.05); - --active: rgba(211, 208, 200, 0.1); - --message-hover: rgba(211, 208, 200, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d2d2d !important; - background: #6699cc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-eldritch.css b/build/base16-eldritch.css index 2e8585b..acf035c 100644 --- a/build/base16-eldritch.css +++ b/build/base16-eldritch.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #37f499; - --dnd-indicator: #f16c75; - --idle-indicator: #f1fc79; - --streaming-indicator: #a48cf2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #39ddfd; - --accent-2: #39ddfd; - --accent-3: #39ddfd; - --accent-4: #04d1f9; - --accent-5: #37f499; - --mention: rgba(241, 252, 121, 0.1); - --mention-hover: rgba(241, 252, 121, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #212337; - --text-1: #f0f2f4; - --text-2: #f0f2f4; - --text-3: #ebfafa; - --text-4: #a1abe0; - --text-5: #7081d0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #212337; /* Master background (Deepest) */ - --bg-3: #323449; /* Secondary background */ - --bg-2: #3b4261; /* Buttons and UI elements */ - --bg-1: #7081d0; /* Active/Clicked states */ - - --hover: rgba(235, 250, 250, 0.05); - --active: rgba(235, 250, 250, 0.1); - --message-hover: rgba(235, 250, 250, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #212337 !important; - background: #39ddfd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-embers-light.css b/build/base16-embers-light.css index 023a4c2..acf035c 100644 --- a/build/base16-embers-light.css +++ b/build/base16-embers-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #57826d; - --dnd-indicator: #826d57; - --idle-indicator: #6d8257; - --streaming-indicator: #82576d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6d5782; - --accent-2: #6d5782; - --accent-3: #6d5782; - --accent-4: #576d82; - --accent-5: #57826d; - --mention: rgba(109, 130, 87, 0.1); - --mention-hover: rgba(109, 130, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #dbd6d1; - --text-1: #2c2620; - --text-2: #2c2620; - --text-3: #433b32; - --text-4: #5a5047; - --text-5: #8a8075; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #dbd6d1; /* Master background (Deepest) */ - --bg-3: #beb6ae; /* Secondary background */ - --bg-2: #a39a90; /* Buttons and UI elements */ - --bg-1: #8a8075; /* Active/Clicked states */ - - --hover: rgba(67, 59, 50, 0.05); - --active: rgba(67, 59, 50, 0.1); - --message-hover: rgba(67, 59, 50, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #dbd6d1 !important; - background: #6d5782 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-embers.css b/build/base16-embers.css index 01249fd..acf035c 100644 --- a/build/base16-embers.css +++ b/build/base16-embers.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #57826d; - --dnd-indicator: #826d57; - --idle-indicator: #6d8257; - --streaming-indicator: #82576d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6d5782; - --accent-2: #6d5782; - --accent-3: #6d5782; - --accent-4: #576d82; - --accent-5: #57826d; - --mention: rgba(109, 130, 87, 0.1); - --mention-hover: rgba(109, 130, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #16130f; - --text-1: #beb6ae; - --text-2: #beb6ae; - --text-3: #a39a90; - --text-4: #8a8075; - --text-5: #5a5047; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #16130f; /* Master background (Deepest) */ - --bg-3: #2c2620; /* Secondary background */ - --bg-2: #433b32; /* Buttons and UI elements */ - --bg-1: #5a5047; /* Active/Clicked states */ - - --hover: rgba(163, 154, 144, 0.05); - --active: rgba(163, 154, 144, 0.1); - --message-hover: rgba(163, 154, 144, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #16130f !important; - background: #6d5782 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-emil.css b/build/base16-emil.css index f68d86d..acf035c 100644 --- a/build/base16-emil.css +++ b/build/base16-emil.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0073a8; - --dnd-indicator: #f43979; - --idle-indicator: #ff669b; - --streaming-indicator: #6916b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #471397; - --accent-2: #471397; - --accent-3: #471397; - --accent-4: #2155d6; - --accent-5: #0073a8; - --mention: rgba(255, 102, 155, 0.1); - --mention-hover: rgba(255, 102, 155, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #efefef; - --text-1: #22223a; - --text-2: #22223a; - --text-3: #313145; - --text-4: #505063; - --text-5: #7c7c98; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #efefef; /* Master background (Deepest) */ - --bg-3: #bebed2; /* Secondary background */ - --bg-2: #9e9eaf; /* Buttons and UI elements */ - --bg-1: #7c7c98; /* Active/Clicked states */ - - --hover: rgba(49, 49, 69, 0.05); - --active: rgba(49, 49, 69, 0.1); - --message-hover: rgba(49, 49, 69, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #efefef !important; - background: #471397 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-equilibrium-dark.css b/build/base16-equilibrium-dark.css index a68aa91..acf035c 100644 --- a/build/base16-equilibrium-dark.css +++ b/build/base16-equilibrium-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7f8b00; - --dnd-indicator: #f04339; - --idle-indicator: #bb8801; - --streaming-indicator: #6a7fd2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #008dd1; - --accent-2: #008dd1; - --accent-3: #008dd1; - --accent-4: #00948b; - --accent-5: #7f8b00; - --mention: rgba(187, 136, 1, 0.1); - --mention-hover: rgba(187, 136, 1, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0c1118; - --text-1: #cac6bd; - --text-2: #cac6bd; - --text-3: #afaba2; - --text-4: #949088; - --text-5: #7b776e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0c1118; /* Master background (Deepest) */ - --bg-3: #181c22; /* Secondary background */ - --bg-2: #22262d; /* Buttons and UI elements */ - --bg-1: #7b776e; /* Active/Clicked states */ - - --hover: rgba(175, 171, 162, 0.05); - --active: rgba(175, 171, 162, 0.1); - --message-hover: rgba(175, 171, 162, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0c1118 !important; - background: #008dd1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-equilibrium-gray-dark.css b/build/base16-equilibrium-gray-dark.css index b3a798c..acf035c 100644 --- a/build/base16-equilibrium-gray-dark.css +++ b/build/base16-equilibrium-gray-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7f8b00; - --dnd-indicator: #f04339; - --idle-indicator: #bb8801; - --streaming-indicator: #6a7fd2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #008dd1; - --accent-2: #008dd1; - --accent-3: #008dd1; - --accent-4: #00948b; - --accent-5: #7f8b00; - --mention: rgba(187, 136, 1, 0.1); - --mention-hover: rgba(187, 136, 1, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #111111; - --text-1: #c6c6c6; - --text-2: #c6c6c6; - --text-3: #ababab; - --text-4: #919191; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #111111; /* Master background (Deepest) */ - --bg-3: #1b1b1b; /* Secondary background */ - --bg-2: #262626; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(171, 171, 171, 0.05); - --active: rgba(171, 171, 171, 0.1); - --message-hover: rgba(171, 171, 171, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #111111 !important; - background: #008dd1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-equilibrium-gray-light.css b/build/base16-equilibrium-gray-light.css index 905cdc5..acf035c 100644 --- a/build/base16-equilibrium-gray-light.css +++ b/build/base16-equilibrium-gray-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #637200; - --dnd-indicator: #d02023; - --idle-indicator: #9d6f00; - --streaming-indicator: #4e66b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0073b5; - --accent-2: #0073b5; - --accent-3: #0073b5; - --accent-4: #007a72; - --accent-5: #637200; - --mention: rgba(157, 111, 0, 0.1); - --mention-hover: rgba(157, 111, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f1f1f1; - --text-1: #303030; - --text-2: #303030; - --text-3: #474747; - --text-4: #5e5e5e; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f1f1f1; /* Master background (Deepest) */ - --bg-3: #e2e2e2; /* Secondary background */ - --bg-2: #d4d4d4; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(71, 71, 71, 0.05); - --active: rgba(71, 71, 71, 0.1); - --message-hover: rgba(71, 71, 71, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f1f1f1 !important; - background: #0073b5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-equilibrium-light.css b/build/base16-equilibrium-light.css index 3fcbcd9..acf035c 100644 --- a/build/base16-equilibrium-light.css +++ b/build/base16-equilibrium-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #637200; - --dnd-indicator: #d02023; - --idle-indicator: #9d6f00; - --streaming-indicator: #4e66b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0073b5; - --accent-2: #0073b5; - --accent-3: #0073b5; - --accent-4: #007a72; - --accent-5: #637200; - --mention: rgba(157, 111, 0, 0.1); - --mention-hover: rgba(157, 111, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f0e7; - --text-1: #2c3138; - --text-2: #2c3138; - --text-3: #43474e; - --text-4: #5a5f66; - --text-5: #73777f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f0e7; /* Master background (Deepest) */ - --bg-3: #e7e2d9; /* Secondary background */ - --bg-2: #d8d4cb; /* Buttons and UI elements */ - --bg-1: #73777f; /* Active/Clicked states */ - - --hover: rgba(67, 71, 78, 0.05); - --active: rgba(67, 71, 78, 0.1); - --message-hover: rgba(67, 71, 78, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f0e7 !important; - background: #0073b5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-eris.css b/build/base16-eris.css index c9c7d6f..acf035c 100644 --- a/build/base16-eris.css +++ b/build/base16-eris.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a2faa8; - --dnd-indicator: #f768a3; - --idle-indicator: #f7d668; - --streaming-indicator: #c368f7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #258fc4; - --accent-2: #258fc4; - --accent-3: #258fc4; - --accent-4: #a2faf0; - --accent-5: #a2faa8; - --mention: rgba(247, 214, 104, 0.1); - --mention-hover: rgba(247, 214, 104, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0a0920; - --text-1: #7986c5; - --text-2: #7986c5; - --text-3: #606bac; - --text-4: #4a5293; - --text-5: #333773; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0a0920; /* Master background (Deepest) */ - --bg-3: #13133a; /* Secondary background */ - --bg-2: #23255a; /* Buttons and UI elements */ - --bg-1: #333773; /* Active/Clicked states */ - - --hover: rgba(96, 107, 172, 0.05); - --active: rgba(96, 107, 172, 0.1); - --message-hover: rgba(96, 107, 172, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0a0920 !important; - background: #258fc4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-espresso.css b/build/base16-espresso.css index 2cbdc30..acf035c 100644 --- a/build/base16-espresso.css +++ b/build/base16-espresso.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a5c261; - --dnd-indicator: #d25252; - --idle-indicator: #ffc66d; - --streaming-indicator: #d197d9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6c99bb; - --accent-2: #6c99bb; - --accent-3: #6c99bb; - --accent-4: #bed6ff; - --accent-5: #a5c261; - --mention: rgba(255, 198, 109, 0.1); - --mention-hover: rgba(255, 198, 109, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d2d2d; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #cccccc; - --text-4: #b4b7b4; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d2d2d; /* Master background (Deepest) */ - --bg-3: #393939; /* Secondary background */ - --bg-2: #515151; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(204, 204, 204, 0.05); - --active: rgba(204, 204, 204, 0.1); - --message-hover: rgba(204, 204, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d2d2d !important; - background: #6c99bb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-eva-dim.css b/build/base16-eva-dim.css index 5e31ca0..acf035c 100644 --- a/build/base16-eva-dim.css +++ b/build/base16-eva-dim.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5de561; - --dnd-indicator: #c4676c; - --idle-indicator: #cfd05d; - --streaming-indicator: #9c6cd3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #1ae1dc; - --accent-2: #1ae1dc; - --accent-3: #1ae1dc; - --accent-4: #4b8f77; - --accent-5: #5de561; - --mention: rgba(207, 208, 93, 0.1); - --mention-hover: rgba(207, 208, 93, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2a3b4d; - --text-1: #d6d7d9; - --text-2: #d6d7d9; - --text-3: #9fa2a6; - --text-4: #7e90a3; - --text-5: #55799c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2a3b4d; /* Master background (Deepest) */ - --bg-3: #3d566f; /* Secondary background */ - --bg-2: #4b6988; /* Buttons and UI elements */ - --bg-1: #55799c; /* Active/Clicked states */ - - --hover: rgba(159, 162, 166, 0.05); - --active: rgba(159, 162, 166, 0.1); - --message-hover: rgba(159, 162, 166, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2a3b4d !important; - background: #1ae1dc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-eva.css b/build/base16-eva.css index 7749d5a..acf035c 100644 --- a/build/base16-eva.css +++ b/build/base16-eva.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #66ff66; - --dnd-indicator: #c4676c; - --idle-indicator: #ffff66; - --streaming-indicator: #9c6cd3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #15f4ee; - --accent-2: #15f4ee; - --accent-3: #15f4ee; - --accent-4: #4b8f77; - --accent-5: #66ff66; - --mention: rgba(255, 255, 102, 0.1); - --mention-hover: rgba(255, 255, 102, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2a3b4d; - --text-1: #d6d7d9; - --text-2: #d6d7d9; - --text-3: #9fa2a6; - --text-4: #7e90a3; - --text-5: #55799c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2a3b4d; /* Master background (Deepest) */ - --bg-3: #3d566f; /* Secondary background */ - --bg-2: #4b6988; /* Buttons and UI elements */ - --bg-1: #55799c; /* Active/Clicked states */ - - --hover: rgba(159, 162, 166, 0.05); - --active: rgba(159, 162, 166, 0.1); - --message-hover: rgba(159, 162, 166, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2a3b4d !important; - background: #15f4ee !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-evenok-dark.css b/build/base16-evenok-dark.css index 2b1b902..acf035c 100644 --- a/build/base16-evenok-dark.css +++ b/build/base16-evenok-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54bc5c; - --dnd-indicator: #f5708a; - --idle-indicator: #b8a300; - --streaming-indicator: #9095ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00aff2; - --accent-2: #00aff2; - --accent-3: #00aff2; - --accent-4: #00bab3; - --accent-5: #54bc5c; - --mention: rgba(184, 163, 0, 0.1); - --mention-hover: rgba(184, 163, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #b0b0b0; - --text-5: #505050; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #505050; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #00aff2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-dark-hard.css b/build/base16-everforest-dark-hard.css index b7ccbf7..acf035c 100644 --- a/build/base16-everforest-dark-hard.css +++ b/build/base16-everforest-dark-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a7c080; - --dnd-indicator: #e67e80; - --idle-indicator: #dbbc7f; - --streaming-indicator: #d699b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7fbbb3; - --accent-2: #7fbbb3; - --accent-3: #7fbbb3; - --accent-4: #83c092; - --accent-5: #a7c080; - --mention: rgba(219, 188, 127, 0.1); - --mention-hover: rgba(219, 188, 127, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #272e33; - --text-1: #edeada; - --text-2: #edeada; - --text-3: #d3c6aa; - --text-4: #9da9a0; - --text-5: #859289; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #272e33; /* Master background (Deepest) */ - --bg-3: #2e383c; /* Secondary background */ - --bg-2: #414b50; /* Buttons and UI elements */ - --bg-1: #859289; /* Active/Clicked states */ - - --hover: rgba(211, 198, 170, 0.05); - --active: rgba(211, 198, 170, 0.1); - --message-hover: rgba(211, 198, 170, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #272e33 !important; - background: #7fbbb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-dark-medium.css b/build/base16-everforest-dark-medium.css index 667af7f..acf035c 100644 --- a/build/base16-everforest-dark-medium.css +++ b/build/base16-everforest-dark-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a7c080; - --dnd-indicator: #e67e80; - --idle-indicator: #dbbc7f; - --streaming-indicator: #d699b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7fbbb3; - --accent-2: #7fbbb3; - --accent-3: #7fbbb3; - --accent-4: #83c092; - --accent-5: #a7c080; - --mention: rgba(219, 188, 127, 0.1); - --mention-hover: rgba(219, 188, 127, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d353b; - --text-1: #9da9a0; - --text-2: #9da9a0; - --text-3: #859289; - --text-4: #7a8478; - --text-5: #475258; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d353b; /* Master background (Deepest) */ - --bg-3: #343f44; /* Secondary background */ - --bg-2: #3d484d; /* Buttons and UI elements */ - --bg-1: #475258; /* Active/Clicked states */ - - --hover: rgba(133, 146, 137, 0.05); - --active: rgba(133, 146, 137, 0.1); - --message-hover: rgba(133, 146, 137, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d353b !important; - background: #7fbbb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-dark-soft.css b/build/base16-everforest-dark-soft.css index 6c72512..acf035c 100644 --- a/build/base16-everforest-dark-soft.css +++ b/build/base16-everforest-dark-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a7c080; - --dnd-indicator: #e67e80; - --idle-indicator: #dbbc7f; - --streaming-indicator: #d699b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7fbbb3; - --accent-2: #7fbbb3; - --accent-3: #7fbbb3; - --accent-4: #83c092; - --accent-5: #a7c080; - --mention: rgba(219, 188, 127, 0.1); - --mention-hover: rgba(219, 188, 127, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #333c43; - --text-1: #ddd8be; - --text-2: #ddd8be; - --text-3: #d3c6aa; - --text-4: #9da9a0; - --text-5: #859289; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #333c43; /* Master background (Deepest) */ - --bg-3: #3a464c; /* Secondary background */ - --bg-2: #4d5960; /* Buttons and UI elements */ - --bg-1: #859289; /* Active/Clicked states */ - - --hover: rgba(211, 198, 170, 0.05); - --active: rgba(211, 198, 170, 0.1); - --message-hover: rgba(211, 198, 170, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #333c43 !important; - background: #7fbbb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-light-hard.css b/build/base16-everforest-light-hard.css index e450f4a..acf035c 100644 --- a/build/base16-everforest-light-hard.css +++ b/build/base16-everforest-light-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8da101; - --dnd-indicator: #f85552; - --idle-indicator: #dfa000; - --streaming-indicator: #df69ba; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3a94c5; - --accent-2: #3a94c5; - --accent-3: #3a94c5; - --accent-4: #35a77c; - --accent-5: #8da101; - --mention: rgba(223, 160, 0, 0.1); - --mention-hover: rgba(223, 160, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fffbef; - --text-1: #414b50; - --text-2: #414b50; - --text-3: #5c6a72; - --text-4: #829181; - --text-5: #939f91; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fffbef; /* Master background (Deepest) */ - --bg-3: #f8f5e4; /* Secondary background */ - --bg-2: #edeada; /* Buttons and UI elements */ - --bg-1: #939f91; /* Active/Clicked states */ - - --hover: rgba(92, 106, 114, 0.05); - --active: rgba(92, 106, 114, 0.1); - --message-hover: rgba(92, 106, 114, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fffbef !important; - background: #3a94c5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-light-medium.css b/build/base16-everforest-light-medium.css index bf21ce6..acf035c 100644 --- a/build/base16-everforest-light-medium.css +++ b/build/base16-everforest-light-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8da101; - --dnd-indicator: #f85552; - --idle-indicator: #dfa000; - --streaming-indicator: #df69ba; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3a94c5; - --accent-2: #3a94c5; - --accent-3: #3a94c5; - --accent-4: #35a77c; - --accent-5: #8da101; - --mention: rgba(223, 160, 0, 0.1); - --mention-hover: rgba(223, 160, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fdf6e3; - --text-1: #475258; - --text-2: #475258; - --text-3: #5c6a72; - --text-4: #829181; - --text-5: #939f91; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fdf6e3; /* Master background (Deepest) */ - --bg-3: #f4f0d9; /* Secondary background */ - --bg-2: #e6e2cc; /* Buttons and UI elements */ - --bg-1: #939f91; /* Active/Clicked states */ - - --hover: rgba(92, 106, 114, 0.05); - --active: rgba(92, 106, 114, 0.1); - --message-hover: rgba(92, 106, 114, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fdf6e3 !important; - background: #3a94c5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest-light-soft.css b/build/base16-everforest-light-soft.css index a52f464..acf035c 100644 --- a/build/base16-everforest-light-soft.css +++ b/build/base16-everforest-light-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8da101; - --dnd-indicator: #f85552; - --idle-indicator: #dfa000; - --streaming-indicator: #df69ba; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3a94c5; - --accent-2: #3a94c5; - --accent-3: #3a94c5; - --accent-4: #35a77c; - --accent-5: #8da101; - --mention: rgba(223, 160, 0, 0.1); - --mention-hover: rgba(223, 160, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f3ead3; - --text-1: #4d5960; - --text-2: #4d5960; - --text-3: #5c6a72; - --text-4: #829181; - --text-5: #939f91; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f3ead3; /* Master background (Deepest) */ - --bg-3: #eae4ca; /* Secondary background */ - --bg-2: #ddd8be; /* Buttons and UI elements */ - --bg-1: #939f91; /* Active/Clicked states */ - - --hover: rgba(92, 106, 114, 0.05); - --active: rgba(92, 106, 114, 0.1); - --message-hover: rgba(92, 106, 114, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f3ead3 !important; - background: #3a94c5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-everforest.css b/build/base16-everforest.css index a475bd2..acf035c 100644 --- a/build/base16-everforest.css +++ b/build/base16-everforest.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a7c080; - --dnd-indicator: #e67e80; - --idle-indicator: #dbbc7f; - --streaming-indicator: #d699b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7fbbb3; - --accent-2: #7fbbb3; - --accent-3: #7fbbb3; - --accent-4: #83c092; - --accent-5: #a7c080; - --mention: rgba(219, 188, 127, 0.1); - --mention-hover: rgba(219, 188, 127, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d353b; - --text-1: #e6e2cc; - --text-2: #e6e2cc; - --text-3: #d3c6aa; - --text-4: #9da9a0; - --text-5: #859289; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d353b; /* Master background (Deepest) */ - --bg-3: #343f44; /* Secondary background */ - --bg-2: #475258; /* Buttons and UI elements */ - --bg-1: #859289; /* Active/Clicked states */ - - --hover: rgba(211, 198, 170, 0.05); - --active: rgba(211, 198, 170, 0.1); - --message-hover: rgba(211, 198, 170, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d353b !important; - background: #7fbbb3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-flat.css b/build/base16-flat.css index f4b2ccc..acf035c 100644 --- a/build/base16-flat.css +++ b/build/base16-flat.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2ecc71; - --dnd-indicator: #e74c3c; - --idle-indicator: #f1c40f; - --streaming-indicator: #9b59b6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3498db; - --accent-2: #3498db; - --accent-3: #3498db; - --accent-4: #1abc9c; - --accent-5: #2ecc71; - --mention: rgba(241, 196, 15, 0.1); - --mention-hover: rgba(241, 196, 15, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2c3e50; - --text-1: #f5f5f5; - --text-2: #f5f5f5; - --text-3: #e0e0e0; - --text-4: #bdc3c7; - --text-5: #95a5a6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2c3e50; /* Master background (Deepest) */ - --bg-3: #34495e; /* Secondary background */ - --bg-2: #7f8c8d; /* Buttons and UI elements */ - --bg-1: #95a5a6; /* Active/Clicked states */ - - --hover: rgba(224, 224, 224, 0.05); - --active: rgba(224, 224, 224, 0.1); - --message-hover: rgba(224, 224, 224, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2c3e50 !important; - background: #3498db !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-flexoki-dark.css b/build/base16-flexoki-dark.css index b2d420e..acf035c 100644 --- a/build/base16-flexoki-dark.css +++ b/build/base16-flexoki-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #879a39; - --dnd-indicator: #d14d41; - --idle-indicator: #d0a215; - --streaming-indicator: #8b7ec8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4385be; - --accent-2: #4385be; - --accent-3: #4385be; - --accent-4: #3aa99f; - --accent-5: #879a39; - --mention: rgba(208, 162, 21, 0.1); - --mention-hover: rgba(208, 162, 21, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #100f0f; - --text-1: #e6e4d9; - --text-2: #e6e4d9; - --text-3: #cecdc3; - --text-4: #878580; - --text-5: #575653; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #100f0f; /* Master background (Deepest) */ - --bg-3: #1c1b1a; /* Secondary background */ - --bg-2: #282726; /* Buttons and UI elements */ - --bg-1: #575653; /* Active/Clicked states */ - - --hover: rgba(206, 205, 195, 0.05); - --active: rgba(206, 205, 195, 0.1); - --message-hover: rgba(206, 205, 195, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #100f0f !important; - background: #4385be !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-flexoki-light.css b/build/base16-flexoki-light.css index cad502c..acf035c 100644 --- a/build/base16-flexoki-light.css +++ b/build/base16-flexoki-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #66800b; - --dnd-indicator: #af3029; - --idle-indicator: #ad8301; - --streaming-indicator: #5e409d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #205ea6; - --accent-2: #205ea6; - --accent-3: #205ea6; - --accent-4: #24837b; - --accent-5: #66800b; - --mention: rgba(173, 131, 1, 0.1); - --mention-hover: rgba(173, 131, 1, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fffcf0; - --text-1: #282726; - --text-2: #282726; - --text-3: #403e3c; - --text-4: #9f9d96; - --text-5: #cecdc3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fffcf0; /* Master background (Deepest) */ - --bg-3: #f2f0e5; /* Secondary background */ - --bg-2: #e6e4d9; /* Buttons and UI elements */ - --bg-1: #cecdc3; /* Active/Clicked states */ - - --hover: rgba(64, 62, 60, 0.05); - --active: rgba(64, 62, 60, 0.1); - --message-hover: rgba(64, 62, 60, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fffcf0 !important; - background: #205ea6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-framer.css b/build/base16-framer.css index 538d1d0..acf035c 100644 --- a/build/base16-framer.css +++ b/build/base16-framer.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #32ccdc; - --dnd-indicator: #fd886b; - --idle-indicator: #fecb6e; - --streaming-indicator: #ba8cfc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #20bcfc; - --accent-2: #20bcfc; - --accent-3: #20bcfc; - --accent-4: #acddfd; - --accent-5: #32ccdc; - --mention: rgba(254, 203, 110, 0.1); - --mention-hover: rgba(254, 203, 110, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181818; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #d0d0d0; - --text-4: #b9b9b9; - --text-5: #747474; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181818; /* Master background (Deepest) */ - --bg-3: #151515; /* Secondary background */ - --bg-2: #464646; /* Buttons and UI elements */ - --bg-1: #747474; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181818 !important; - background: #20bcfc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-fruit-soda.css b/build/base16-fruit-soda.css index 13bcf4a..acf035c 100644 --- a/build/base16-fruit-soda.css +++ b/build/base16-fruit-soda.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #47f74c; - --dnd-indicator: #fe3e31; - --idle-indicator: #f7e203; - --streaming-indicator: #611fce; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2931df; - --accent-2: #2931df; - --accent-3: #2931df; - --accent-4: #0f9cfd; - --accent-5: #47f74c; - --mention: rgba(247, 226, 3, 0.1); - --mention-hover: rgba(247, 226, 3, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f1ecf1; - --text-1: #474545; - --text-2: #474545; - --text-3: #515151; - --text-4: #979598; - --text-5: #b5b4b6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f1ecf1; /* Master background (Deepest) */ - --bg-3: #e0dee0; /* Secondary background */ - --bg-2: #d8d5d5; /* Buttons and UI elements */ - --bg-1: #b5b4b6; /* Active/Clicked states */ - - --hover: rgba(81, 81, 81, 0.05); - --active: rgba(81, 81, 81, 0.1); - --message-hover: rgba(81, 81, 81, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f1ecf1 !important; - background: #2931df !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gigavolt.css b/build/base16-gigavolt.css index 9829259..acf035c 100644 --- a/build/base16-gigavolt.css +++ b/build/base16-gigavolt.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #f2e6a9; - --dnd-indicator: #ff661a; - --idle-indicator: #ffdc2d; - --streaming-indicator: #ae94f9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #40bfff; - --accent-2: #40bfff; - --accent-3: #40bfff; - --accent-4: #fb6acb; - --accent-5: #f2e6a9; - --mention: rgba(255, 220, 45, 0.1); - --mention-hover: rgba(255, 220, 45, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #202126; - --text-1: #eff0f9; - --text-2: #eff0f9; - --text-3: #e9e7e1; - --text-4: #cad3ff; - --text-5: #a1d2e6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #202126; /* Master background (Deepest) */ - --bg-3: #2d303d; /* Secondary background */ - --bg-2: #5a576e; /* Buttons and UI elements */ - --bg-1: #a1d2e6; /* Active/Clicked states */ - - --hover: rgba(233, 231, 225, 0.05); - --active: rgba(233, 231, 225, 0.1); - --message-hover: rgba(233, 231, 225, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #202126 !important; - background: #40bfff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-dark-colorblind.css b/build/base16-github-dark-colorblind.css index 95d4dcd..acf035c 100644 --- a/build/base16-github-dark-colorblind.css +++ b/build/base16-github-dark-colorblind.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a5d6ff; - --dnd-indicator: #fdac54; - --idle-indicator: #bb8009; - --streaming-indicator: #ec8e2c; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #d2a8ff; - --accent-2: #d2a8ff; - --accent-3: #d2a8ff; - --accent-4: #a5d6ff; - --accent-5: #a5d6ff; - --mention: rgba(187, 128, 9, 0.1); - --mention-hover: rgba(187, 128, 9, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0d1117; - --text-1: #f0f6fc; - --text-2: #f0f6fc; - --text-3: #c9d1d9; - --text-4: #8b949e; - --text-5: #6e7681; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0d1117; /* Master background (Deepest) */ - --bg-3: #161b22; /* Secondary background */ - --bg-2: #484f58; /* Buttons and UI elements */ - --bg-1: #6e7681; /* Active/Clicked states */ - - --hover: rgba(201, 209, 217, 0.05); - --active: rgba(201, 209, 217, 0.1); - --message-hover: rgba(201, 209, 217, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0d1117 !important; - background: #d2a8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-dark-dimmed.css b/build/base16-github-dark-dimmed.css index 052a5d4..acf035c 100644 --- a/build/base16-github-dark-dimmed.css +++ b/build/base16-github-dark-dimmed.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #96d0ff; - --dnd-indicator: #f69d50; - --idle-indicator: #ae7c14; - --streaming-indicator: #f47067; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #dcbdfb; - --accent-2: #dcbdfb; - --accent-3: #dcbdfb; - --accent-4: #8ddb8c; - --accent-5: #96d0ff; - --mention: rgba(174, 124, 20, 0.1); - --mention-hover: rgba(174, 124, 20, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #22272e; - --text-1: #cdd9e5; - --text-2: #cdd9e5; - --text-3: #adbac7; - --text-4: #768390; - --text-5: #636e7b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #22272e; /* Master background (Deepest) */ - --bg-3: #2d333b; /* Secondary background */ - --bg-2: #545d68; /* Buttons and UI elements */ - --bg-1: #636e7b; /* Active/Clicked states */ - - --hover: rgba(173, 186, 199, 0.05); - --active: rgba(173, 186, 199, 0.1); - --message-hover: rgba(173, 186, 199, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #22272e !important; - background: #dcbdfb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-dark-high-contrast.css b/build/base16-github-dark-high-contrast.css index 23d790f..acf035c 100644 --- a/build/base16-github-dark-high-contrast.css +++ b/build/base16-github-dark-high-contrast.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #addcff; - --dnd-indicator: #ffb757; - --idle-indicator: #e09b13; - --streaming-indicator: #ff9492; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #dbb7ff; - --accent-2: #dbb7ff; - --accent-3: #dbb7ff; - --accent-4: #72f088; - --accent-5: #addcff; - --mention: rgba(224, 155, 19, 0.1); - --mention-hover: rgba(224, 155, 19, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0a0c10; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #f0f3f6; - --text-4: #bdc4cc; - --text-5: #9ea7b3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0a0c10; /* Master background (Deepest) */ - --bg-3: #272b33; /* Secondary background */ - --bg-2: #7a828e; /* Buttons and UI elements */ - --bg-1: #9ea7b3; /* Active/Clicked states */ - - --hover: rgba(240, 243, 246, 0.05); - --active: rgba(240, 243, 246, 0.1); - --message-hover: rgba(240, 243, 246, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0a0c10 !important; - background: #dbb7ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-dark.css b/build/base16-github-dark.css index 5fd7f65..acf035c 100644 --- a/build/base16-github-dark.css +++ b/build/base16-github-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a5d6ff; - --dnd-indicator: #ffa657; - --idle-indicator: #bb8009; - --streaming-indicator: #ff7b72; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #d2a8ff; - --accent-2: #d2a8ff; - --accent-3: #d2a8ff; - --accent-4: #7ee787; - --accent-5: #a5d6ff; - --mention: rgba(187, 128, 9, 0.1); - --mention-hover: rgba(187, 128, 9, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0d1117; - --text-1: #f0f6fc; - --text-2: #f0f6fc; - --text-3: #c9d1d9; - --text-4: #8b949e; - --text-5: #6e7681; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0d1117; /* Master background (Deepest) */ - --bg-3: #161b22; /* Secondary background */ - --bg-2: #484f58; /* Buttons and UI elements */ - --bg-1: #6e7681; /* Active/Clicked states */ - - --hover: rgba(201, 209, 217, 0.05); - --active: rgba(201, 209, 217, 0.1); - --message-hover: rgba(201, 209, 217, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0d1117 !important; - background: #d2a8ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-light-colorblind.css b/build/base16-github-light-colorblind.css index 17adcba..acf035c 100644 --- a/build/base16-github-light-colorblind.css +++ b/build/base16-github-light-colorblind.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0a3069; - --dnd-indicator: #8a4600; - --idle-indicator: #bf8700; - --streaming-indicator: #b35900; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8250df; - --accent-2: #8250df; - --accent-3: #8250df; - --accent-4: #0550ae; - --accent-5: #0a3069; - --mention: rgba(191, 135, 0, 0.1); - --mention-hover: rgba(191, 135, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #32383f; - --text-2: #32383f; - --text-3: #424a53; - --text-4: #6e7781; - --text-5: #8c959f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #f6f8fa; /* Secondary background */ - --bg-2: #afb8c1; /* Buttons and UI elements */ - --bg-1: #8c959f; /* Active/Clicked states */ - - --hover: rgba(66, 74, 83, 0.05); - --active: rgba(66, 74, 83, 0.1); - --message-hover: rgba(66, 74, 83, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #8250df !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github-light-high-contrast.css b/build/base16-github-light-high-contrast.css index 904a625..acf035c 100644 --- a/build/base16-github-light-high-contrast.css +++ b/build/base16-github-light-high-contrast.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #032563; - --dnd-indicator: #702c00; - --idle-indicator: #956400; - --streaming-indicator: #a0111f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #622cbc; - --accent-2: #622cbc; - --accent-3: #622cbc; - --accent-4: #024c1a; - --accent-5: #032563; - --mention: rgba(149, 100, 0, 0.1); - --mention-hover: rgba(149, 100, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #20252c; - --text-2: #20252c; - --text-3: #343b43; - --text-4: #66707b; - --text-5: #88929d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e7ecf0; /* Secondary background */ - --bg-2: #acb6c0; /* Buttons and UI elements */ - --bg-1: #88929d; /* Active/Clicked states */ - - --hover: rgba(52, 59, 67, 0.05); - --active: rgba(52, 59, 67, 0.1); - --message-hover: rgba(52, 59, 67, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #622cbc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-github.css b/build/base16-github.css index e96701e..acf035c 100644 --- a/build/base16-github.css +++ b/build/base16-github.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0a3069; - --dnd-indicator: #953800; - --idle-indicator: #bf8700; - --streaming-indicator: #cf222e; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8250df; - --accent-2: #8250df; - --accent-3: #8250df; - --accent-4: #116329; - --accent-5: #0a3069; - --mention: rgba(191, 135, 0, 0.1); - --mention-hover: rgba(191, 135, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #32383f; - --text-2: #32383f; - --text-3: #424a53; - --text-4: #6e7781; - --text-5: #8c959f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #f6f8fa; /* Secondary background */ - --bg-2: #afb8c1; /* Buttons and UI elements */ - --bg-1: #8c959f; /* Active/Clicked states */ - - --hover: rgba(66, 74, 83, 0.05); - --active: rgba(66, 74, 83, 0.1); - --message-hover: rgba(66, 74, 83, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #8250df !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-google-dark.css b/build/base16-google-dark.css index 0f617bf..acf035c 100644 --- a/build/base16-google-dark.css +++ b/build/base16-google-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #198844; - --dnd-indicator: #cc342b; - --idle-indicator: #fba922; - --streaming-indicator: #a36ac7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3971ed; - --accent-2: #3971ed; - --accent-3: #3971ed; - --accent-4: #3971ed; - --accent-5: #198844; - --mention: rgba(251, 169, 34, 0.1); - --mention-hover: rgba(251, 169, 34, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1f21; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #c5c8c6; - --text-4: #b4b7b4; - --text-5: #969896; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1f21; /* Master background (Deepest) */ - --bg-3: #282a2e; /* Secondary background */ - --bg-2: #373b41; /* Buttons and UI elements */ - --bg-1: #969896; /* Active/Clicked states */ - - --hover: rgba(197, 200, 198, 0.05); - --active: rgba(197, 200, 198, 0.1); - --message-hover: rgba(197, 200, 198, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1f21 !important; - background: #3971ed !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-google-light.css b/build/base16-google-light.css index d82066b..acf035c 100644 --- a/build/base16-google-light.css +++ b/build/base16-google-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #198844; - --dnd-indicator: #cc342b; - --idle-indicator: #fba922; - --streaming-indicator: #a36ac7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3971ed; - --accent-2: #3971ed; - --accent-3: #3971ed; - --accent-4: #3971ed; - --accent-5: #198844; - --mention: rgba(251, 169, 34, 0.1); - --mention-hover: rgba(251, 169, 34, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #282a2e; - --text-2: #282a2e; - --text-3: #373b41; - --text-4: #969896; - --text-5: #b4b7b4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #c5c8c6; /* Buttons and UI elements */ - --bg-1: #b4b7b4; /* Active/Clicked states */ - - --hover: rgba(55, 59, 65, 0.05); - --active: rgba(55, 59, 65, 0.1); - --message-hover: rgba(55, 59, 65, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #3971ed !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gotham.css b/build/base16-gotham.css index 55b9281..acf035c 100644 --- a/build/base16-gotham.css +++ b/build/base16-gotham.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #33859e; - --dnd-indicator: #c23127; - --idle-indicator: #edb443; - --streaming-indicator: #888ca6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #195466; - --accent-2: #195466; - --accent-3: #195466; - --accent-4: #2aa889; - --accent-5: #33859e; - --mention: rgba(237, 180, 67, 0.1); - --mention-hover: rgba(237, 180, 67, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0c1014; - --text-1: #99d1ce; - --text-2: #99d1ce; - --text-3: #599cab; - --text-4: #245361; - --text-5: #0a3749; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0c1014; /* Master background (Deepest) */ - --bg-3: #11151c; /* Secondary background */ - --bg-2: #091f2e; /* Buttons and UI elements */ - --bg-1: #0a3749; /* Active/Clicked states */ - - --hover: rgba(89, 156, 171, 0.05); - --active: rgba(89, 156, 171, 0.1); - --message-hover: rgba(89, 156, 171, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0c1014 !important; - background: #195466 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-grayscale-dark.css b/build/base16-grayscale-dark.css index f535775..acf035c 100644 --- a/build/base16-grayscale-dark.css +++ b/build/base16-grayscale-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8e8e8e; - --dnd-indicator: #7c7c7c; - --idle-indicator: #a0a0a0; - --streaming-indicator: #747474; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #686868; - --accent-2: #686868; - --accent-3: #686868; - --accent-4: #868686; - --accent-5: #8e8e8e; - --mention: rgba(160, 160, 160, 0.1); - --mention-hover: rgba(160, 160, 160, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101010; - --text-1: #e3e3e3; - --text-2: #e3e3e3; - --text-3: #b9b9b9; - --text-4: #ababab; - --text-5: #525252; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101010; /* Master background (Deepest) */ - --bg-3: #252525; /* Secondary background */ - --bg-2: #464646; /* Buttons and UI elements */ - --bg-1: #525252; /* Active/Clicked states */ - - --hover: rgba(185, 185, 185, 0.05); - --active: rgba(185, 185, 185, 0.1); - --message-hover: rgba(185, 185, 185, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101010 !important; - background: #686868 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-grayscale-light.css b/build/base16-grayscale-light.css index 3fbf3b1..acf035c 100644 --- a/build/base16-grayscale-light.css +++ b/build/base16-grayscale-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8e8e8e; - --dnd-indicator: #7c7c7c; - --idle-indicator: #a0a0a0; - --streaming-indicator: #747474; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #686868; - --accent-2: #686868; - --accent-3: #686868; - --accent-4: #868686; - --accent-5: #8e8e8e; - --mention: rgba(160, 160, 160, 0.1); - --mention-hover: rgba(160, 160, 160, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f7f7f7; - --text-1: #252525; - --text-2: #252525; - --text-3: #464646; - --text-4: #525252; - --text-5: #ababab; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f7f7f7; /* Master background (Deepest) */ - --bg-3: #e3e3e3; /* Secondary background */ - --bg-2: #b9b9b9; /* Buttons and UI elements */ - --bg-1: #ababab; /* Active/Clicked states */ - - --hover: rgba(70, 70, 70, 0.05); - --active: rgba(70, 70, 70, 0.1); - --message-hover: rgba(70, 70, 70, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f7f7f7 !important; - background: #686868 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-greenscreen.css b/build/base16-greenscreen.css index d07bad3..acf035c 100644 --- a/build/base16-greenscreen.css +++ b/build/base16-greenscreen.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00bb00; - --dnd-indicator: #007700; - --idle-indicator: #007700; - --streaming-indicator: #00bb00; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #009900; - --accent-2: #009900; - --accent-3: #009900; - --accent-4: #005500; - --accent-5: #00bb00; - --mention: rgba(0, 119, 0, 0.1); - --mention-hover: rgba(0, 119, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #001100; - --text-1: #00dd00; - --text-2: #00dd00; - --text-3: #00bb00; - --text-4: #009900; - --text-5: #007700; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #001100; /* Master background (Deepest) */ - --bg-3: #003300; /* Secondary background */ - --bg-2: #005500; /* Buttons and UI elements */ - --bg-1: #007700; /* Active/Clicked states */ - - --hover: rgba(0, 187, 0, 0.05); - --active: rgba(0, 187, 0, 0.1); - --message-hover: rgba(0, 187, 0, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #001100 !important; - background: #009900 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruber.css b/build/base16-gruber.css index d66f7d8..acf035c 100644 --- a/build/base16-gruber.css +++ b/build/base16-gruber.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #73c936; - --dnd-indicator: #f43841; - --idle-indicator: #ffdd33; - --streaming-indicator: #9e95c7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #96a6c8; - --accent-2: #96a6c8; - --accent-3: #96a6c8; - --accent-4: #95a99f; - --accent-5: #73c936; - --mention: rgba(255, 221, 51, 0.1); - --mention-hover: rgba(255, 221, 51, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181818; - --text-1: #f5f5f5; - --text-2: #f5f5f5; - --text-3: #f4f4ff; - --text-4: #e4e4ef; - --text-5: #52494e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181818; /* Master background (Deepest) */ - --bg-3: #453d41; /* Secondary background */ - --bg-2: #484848; /* Buttons and UI elements */ - --bg-1: #52494e; /* Active/Clicked states */ - - --hover: rgba(244, 244, 255, 0.05); - --active: rgba(244, 244, 255, 0.1); - --message-hover: rgba(244, 244, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181818 !important; - background: #96a6c8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark-hard.css b/build/base16-gruvbox-dark-hard.css index cc9e692..acf035c 100644 --- a/build/base16-gruvbox-dark-hard.css +++ b/build/base16-gruvbox-dark-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8bb26; - --dnd-indicator: #fb4934; - --idle-indicator: #fabd2f; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83a598; - --accent-2: #83a598; - --accent-3: #83a598; - --accent-4: #8ec07c; - --accent-5: #b8bb26; - --mention: rgba(250, 189, 47, 0.1); - --mention-hover: rgba(250, 189, 47, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d2021; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #d5c4a1; - --text-4: #bdae93; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d2021; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(213, 196, 161, 0.05); - --active: rgba(213, 196, 161, 0.1); - --message-hover: rgba(213, 196, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d2021 !important; - background: #83a598 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark-medium-forest.css b/build/base16-gruvbox-dark-medium-forest.css index c6d975a..acf035c 100644 --- a/build/base16-gruvbox-dark-medium-forest.css +++ b/build/base16-gruvbox-dark-medium-forest.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8bb26; - --dnd-indicator: #fb4934; - --idle-indicator: #fabd2f; - --streaming-indicator: #96bda2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b8bb26; - --accent-2: #b8bb26; - --accent-3: #b8bb26; - --accent-4: #5f6c1f; - --accent-5: #b8bb26; - --mention: rgba(250, 189, 47, 0.1); - --mention-hover: rgba(250, 189, 47, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282828; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #d5c4a1; - --text-4: #bdae93; - --text-5: #665c50; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282828; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c50; /* Active/Clicked states */ - - --hover: rgba(213, 196, 161, 0.05); - --active: rgba(213, 196, 161, 0.1); - --message-hover: rgba(213, 196, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282828 !important; - background: #b8bb26 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark-medium.css b/build/base16-gruvbox-dark-medium.css index 4de8fce..acf035c 100644 --- a/build/base16-gruvbox-dark-medium.css +++ b/build/base16-gruvbox-dark-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8bb26; - --dnd-indicator: #fb4934; - --idle-indicator: #fabd2f; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83a598; - --accent-2: #83a598; - --accent-3: #83a598; - --accent-4: #8ec07c; - --accent-5: #b8bb26; - --mention: rgba(250, 189, 47, 0.1); - --mention-hover: rgba(250, 189, 47, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282828; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #d5c4a1; - --text-4: #bdae93; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282828; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(213, 196, 161, 0.05); - --active: rgba(213, 196, 161, 0.1); - --message-hover: rgba(213, 196, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282828 !important; - background: #83a598 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark-pale.css b/build/base16-gruvbox-dark-pale.css index 62a109c..acf035c 100644 --- a/build/base16-gruvbox-dark-pale.css +++ b/build/base16-gruvbox-dark-pale.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #afaf00; - --dnd-indicator: #d75f5f; - --idle-indicator: #ffaf00; - --streaming-indicator: #d485ad; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83adad; - --accent-2: #83adad; - --accent-3: #83adad; - --accent-4: #85ad85; - --accent-5: #afaf00; - --mention: rgba(255, 175, 0, 0.1); - --mention-hover: rgba(255, 175, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #262626; - --text-1: #d5c4a1; - --text-2: #d5c4a1; - --text-3: #dab997; - --text-4: #949494; - --text-5: #8a8a8a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #262626; /* Master background (Deepest) */ - --bg-3: #3a3a3a; /* Secondary background */ - --bg-2: #4e4e4e; /* Buttons and UI elements */ - --bg-1: #8a8a8a; /* Active/Clicked states */ - - --hover: rgba(218, 185, 151, 0.05); - --active: rgba(218, 185, 151, 0.1); - --message-hover: rgba(218, 185, 151, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #262626 !important; - background: #83adad !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark-soft.css b/build/base16-gruvbox-dark-soft.css index 0997a3f..acf035c 100644 --- a/build/base16-gruvbox-dark-soft.css +++ b/build/base16-gruvbox-dark-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b8bb26; - --dnd-indicator: #fb4934; - --idle-indicator: #fabd2f; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83a598; - --accent-2: #83a598; - --accent-3: #83a598; - --accent-4: #8ec07c; - --accent-5: #b8bb26; - --mention: rgba(250, 189, 47, 0.1); - --mention-hover: rgba(250, 189, 47, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #32302f; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #d5c4a1; - --text-4: #bdae93; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #32302f; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(213, 196, 161, 0.05); - --active: rgba(213, 196, 161, 0.1); - --message-hover: rgba(213, 196, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #32302f !important; - background: #83a598 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-dark.css b/build/base16-gruvbox-dark.css index 59cec23..acf035c 100644 --- a/build/base16-gruvbox-dark.css +++ b/build/base16-gruvbox-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98971a; - --dnd-indicator: #cc241d; - --idle-indicator: #d79921; - --streaming-indicator: #b16286; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #458588; - --accent-2: #458588; - --accent-3: #458588; - --accent-4: #689d6a; - --accent-5: #98971a; - --mention: rgba(215, 153, 33, 0.1); - --mention-hover: rgba(215, 153, 33, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282828; - --text-1: #fbf1c7; - --text-2: #fbf1c7; - --text-3: #ebdbb2; - --text-4: #928374; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282828; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(235, 219, 178, 0.05); - --active: rgba(235, 219, 178, 0.1); - --message-hover: rgba(235, 219, 178, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282828 !important; - background: #458588 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-light-hard.css b/build/base16-gruvbox-light-hard.css index bcc7e27..acf035c 100644 --- a/build/base16-gruvbox-light-hard.css +++ b/build/base16-gruvbox-light-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #79740e; - --dnd-indicator: #9d0006; - --idle-indicator: #b57614; - --streaming-indicator: #8f3f71; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #076678; - --accent-2: #076678; - --accent-3: #076678; - --accent-4: #427b58; - --accent-5: #79740e; - --mention: rgba(181, 118, 20, 0.1); - --mention-hover: rgba(181, 118, 20, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f9f5d7; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #504945; - --text-4: #665c54; - --text-5: #bdae93; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f9f5d7; /* Master background (Deepest) */ - --bg-3: #ebdbb2; /* Secondary background */ - --bg-2: #d5c4a1; /* Buttons and UI elements */ - --bg-1: #bdae93; /* Active/Clicked states */ - - --hover: rgba(80, 73, 69, 0.05); - --active: rgba(80, 73, 69, 0.1); - --message-hover: rgba(80, 73, 69, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f9f5d7 !important; - background: #076678 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-light-medium.css b/build/base16-gruvbox-light-medium.css index 78de24f..acf035c 100644 --- a/build/base16-gruvbox-light-medium.css +++ b/build/base16-gruvbox-light-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #79740e; - --dnd-indicator: #9d0006; - --idle-indicator: #b57614; - --streaming-indicator: #8f3f71; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #076678; - --accent-2: #076678; - --accent-3: #076678; - --accent-4: #427b58; - --accent-5: #79740e; - --mention: rgba(181, 118, 20, 0.1); - --mention-hover: rgba(181, 118, 20, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbf1c7; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #504945; - --text-4: #665c54; - --text-5: #bdae93; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbf1c7; /* Master background (Deepest) */ - --bg-3: #ebdbb2; /* Secondary background */ - --bg-2: #d5c4a1; /* Buttons and UI elements */ - --bg-1: #bdae93; /* Active/Clicked states */ - - --hover: rgba(80, 73, 69, 0.05); - --active: rgba(80, 73, 69, 0.1); - --message-hover: rgba(80, 73, 69, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbf1c7 !important; - background: #076678 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-light-soft.css b/build/base16-gruvbox-light-soft.css index 55c3812..acf035c 100644 --- a/build/base16-gruvbox-light-soft.css +++ b/build/base16-gruvbox-light-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #79740e; - --dnd-indicator: #9d0006; - --idle-indicator: #b57614; - --streaming-indicator: #8f3f71; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #076678; - --accent-2: #076678; - --accent-3: #076678; - --accent-4: #427b58; - --accent-5: #79740e; - --mention: rgba(181, 118, 20, 0.1); - --mention-hover: rgba(181, 118, 20, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f2e5bc; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #504945; - --text-4: #665c54; - --text-5: #bdae93; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f2e5bc; /* Master background (Deepest) */ - --bg-3: #ebdbb2; /* Secondary background */ - --bg-2: #d5c4a1; /* Buttons and UI elements */ - --bg-1: #bdae93; /* Active/Clicked states */ - - --hover: rgba(80, 73, 69, 0.05); - --active: rgba(80, 73, 69, 0.1); - --message-hover: rgba(80, 73, 69, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f2e5bc !important; - background: #076678 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-light.css b/build/base16-gruvbox-light.css index 2dab1c5..acf035c 100644 --- a/build/base16-gruvbox-light.css +++ b/build/base16-gruvbox-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98971a; - --dnd-indicator: #cc241d; - --idle-indicator: #d79921; - --streaming-indicator: #b16286; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #458588; - --accent-2: #458588; - --accent-3: #458588; - --accent-4: #689d6a; - --accent-5: #98971a; - --mention: rgba(215, 153, 33, 0.1); - --mention-hover: rgba(215, 153, 33, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbf1c7; - --text-1: #282828; - --text-2: #282828; - --text-3: #3c3836; - --text-4: #7c6f64; - --text-5: #bdae93; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbf1c7; /* Master background (Deepest) */ - --bg-3: #ebdbb2; /* Secondary background */ - --bg-2: #d5c4a1; /* Buttons and UI elements */ - --bg-1: #bdae93; /* Active/Clicked states */ - - --hover: rgba(60, 56, 54, 0.05); - --active: rgba(60, 56, 54, 0.1); - --message-hover: rgba(60, 56, 54, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbf1c7 !important; - background: #458588 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-dark-hard.css b/build/base16-gruvbox-material-dark-hard.css index 1aa0f4e..acf035c 100644 --- a/build/base16-gruvbox-material-dark-hard.css +++ b/build/base16-gruvbox-material-dark-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a9b665; - --dnd-indicator: #ea6962; - --idle-indicator: #d8a657; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7daea3; - --accent-2: #7daea3; - --accent-3: #7daea3; - --accent-4: #89b482; - --accent-5: #a9b665; - --mention: rgba(216, 166, 87, 0.1); - --mention-hover: rgba(216, 166, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #202020; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #ddc7a1; - --text-4: #bdae93; - --text-5: #5a524c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #202020; /* Master background (Deepest) */ - --bg-3: #2a2827; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #5a524c; /* Active/Clicked states */ - - --hover: rgba(221, 199, 161, 0.05); - --active: rgba(221, 199, 161, 0.1); - --message-hover: rgba(221, 199, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #202020 !important; - background: #7daea3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-dark-medium.css b/build/base16-gruvbox-material-dark-medium.css index 1cb88d4..acf035c 100644 --- a/build/base16-gruvbox-material-dark-medium.css +++ b/build/base16-gruvbox-material-dark-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a9b665; - --dnd-indicator: #ea6962; - --idle-indicator: #d8a657; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7daea3; - --accent-2: #7daea3; - --accent-3: #7daea3; - --accent-4: #89b482; - --accent-5: #a9b665; - --mention: rgba(216, 166, 87, 0.1); - --mention-hover: rgba(216, 166, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292828; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #ddc7a1; - --text-4: #bdae93; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292828; /* Master background (Deepest) */ - --bg-3: #32302f; /* Secondary background */ - --bg-2: #504945; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(221, 199, 161, 0.05); - --active: rgba(221, 199, 161, 0.1); - --message-hover: rgba(221, 199, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292828 !important; - background: #7daea3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-dark-soft.css b/build/base16-gruvbox-material-dark-soft.css index e5f0ce6..acf035c 100644 --- a/build/base16-gruvbox-material-dark-soft.css +++ b/build/base16-gruvbox-material-dark-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a9b665; - --dnd-indicator: #ea6962; - --idle-indicator: #d8a657; - --streaming-indicator: #d3869b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7daea3; - --accent-2: #7daea3; - --accent-3: #7daea3; - --accent-4: #89b482; - --accent-5: #a9b665; - --mention: rgba(216, 166, 87, 0.1); - --mention-hover: rgba(216, 166, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #32302f; - --text-1: #ebdbb2; - --text-2: #ebdbb2; - --text-3: #ddc7a1; - --text-4: #bdae93; - --text-5: #7c6f64; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #32302f; /* Master background (Deepest) */ - --bg-3: #3c3836; /* Secondary background */ - --bg-2: #5a524c; /* Buttons and UI elements */ - --bg-1: #7c6f64; /* Active/Clicked states */ - - --hover: rgba(221, 199, 161, 0.05); - --active: rgba(221, 199, 161, 0.1); - --message-hover: rgba(221, 199, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #32302f !important; - background: #7daea3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-light-hard.css b/build/base16-gruvbox-material-light-hard.css index b33d7d9..acf035c 100644 --- a/build/base16-gruvbox-material-light-hard.css +++ b/build/base16-gruvbox-material-light-hard.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6c782e; - --dnd-indicator: #c14a4a; - --idle-indicator: #b47109; - --streaming-indicator: #945e80; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #45707a; - --accent-2: #45707a; - --accent-3: #45707a; - --accent-4: #4c7a5d; - --accent-5: #6c782e; - --mention: rgba(180, 113, 9, 0.1); - --mention-hover: rgba(180, 113, 9, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f9f5d7; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #654735; - --text-4: #c9b99a; - --text-5: #a89984; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f9f5d7; /* Master background (Deepest) */ - --bg-3: #fbf1c7; /* Secondary background */ - --bg-2: #e0cfa9; /* Buttons and UI elements */ - --bg-1: #a89984; /* Active/Clicked states */ - - --hover: rgba(101, 71, 53, 0.05); - --active: rgba(101, 71, 53, 0.1); - --message-hover: rgba(101, 71, 53, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f9f5d7 !important; - background: #45707a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-light-medium.css b/build/base16-gruvbox-material-light-medium.css index 5ff2132..acf035c 100644 --- a/build/base16-gruvbox-material-light-medium.css +++ b/build/base16-gruvbox-material-light-medium.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6c782e; - --dnd-indicator: #c14a4a; - --idle-indicator: #b47109; - --streaming-indicator: #945e80; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #45707a; - --accent-2: #45707a; - --accent-3: #45707a; - --accent-4: #4c7a5d; - --accent-5: #6c782e; - --mention: rgba(180, 113, 9, 0.1); - --mention-hover: rgba(180, 113, 9, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbf1c7; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #654735; - --text-4: #665c54; - --text-5: #bdae93; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbf1c7; /* Master background (Deepest) */ - --bg-3: #f2e5bc; /* Secondary background */ - --bg-2: #d5c4a1; /* Buttons and UI elements */ - --bg-1: #bdae93; /* Active/Clicked states */ - - --hover: rgba(101, 71, 53, 0.05); - --active: rgba(101, 71, 53, 0.1); - --message-hover: rgba(101, 71, 53, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbf1c7 !important; - background: #45707a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-gruvbox-material-light-soft.css b/build/base16-gruvbox-material-light-soft.css index cd4258b..acf035c 100644 --- a/build/base16-gruvbox-material-light-soft.css +++ b/build/base16-gruvbox-material-light-soft.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6c782e; - --dnd-indicator: #c14a4a; - --idle-indicator: #b47109; - --streaming-indicator: #945e80; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #45707a; - --accent-2: #45707a; - --accent-3: #45707a; - --accent-4: #4c7a5d; - --accent-5: #6c782e; - --mention: rgba(180, 113, 9, 0.1); - --mention-hover: rgba(180, 113, 9, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f2e5bc; - --text-1: #3c3836; - --text-2: #3c3836; - --text-3: #654735; - --text-4: #665c54; - --text-5: #a89984; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f2e5bc; /* Master background (Deepest) */ - --bg-3: #ebdbb2; /* Secondary background */ - --bg-2: #c9b99a; /* Buttons and UI elements */ - --bg-1: #a89984; /* Active/Clicked states */ - - --hover: rgba(101, 71, 53, 0.05); - --active: rgba(101, 71, 53, 0.1); - --message-hover: rgba(101, 71, 53, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f2e5bc !important; - background: #45707a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-hardcore.css b/build/base16-hardcore.css index e4fba98..acf035c 100644 --- a/build/base16-hardcore.css +++ b/build/base16-hardcore.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a6e22e; - --dnd-indicator: #f92672; - --idle-indicator: #e6db74; - --streaming-indicator: #9e6ffe; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #66d9ef; - --accent-2: #66d9ef; - --accent-3: #66d9ef; - --accent-4: #708387; - --accent-5: #a6e22e; - --mention: rgba(230, 219, 116, 0.1); - --mention-hover: rgba(230, 219, 116, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #212121; - --text-1: #e5e5e5; - --text-2: #e5e5e5; - --text-3: #cdcdcd; - --text-4: #707070; - --text-5: #4a4a4a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #212121; /* Master background (Deepest) */ - --bg-3: #303030; /* Secondary background */ - --bg-2: #353535; /* Buttons and UI elements */ - --bg-1: #4a4a4a; /* Active/Clicked states */ - - --hover: rgba(205, 205, 205, 0.05); - --active: rgba(205, 205, 205, 0.1); - --message-hover: rgba(205, 205, 205, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #212121 !important; - background: #66d9ef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-hardhacker.css b/build/base16-hardhacker.css index 71f4b50..acf035c 100644 --- a/build/base16-hardhacker.css +++ b/build/base16-hardhacker.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b1f2a7; - --dnd-indicator: #e965a5; - --idle-indicator: #ebde76; - --streaming-indicator: #ff79c6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #95a6f4; - --accent-2: #95a6f4; - --accent-3: #95a6f4; - --accent-4: #b3f4f3; - --accent-5: #b1f2a7; - --mention: rgba(235, 222, 118, 0.1); - --mention-hover: rgba(235, 222, 118, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #211e2a; - --text-1: #f2e8f0; - --text-2: #f2e8f0; - --text-3: #e4dee9; - --text-4: #8a829e; - --text-5: #6e6780; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #211e2a; /* Master background (Deepest) */ - --bg-3: #2c2737; /* Secondary background */ - --bg-2: #3f3951; /* Buttons and UI elements */ - --bg-1: #6e6780; /* Active/Clicked states */ - - --hover: rgba(228, 222, 233, 0.05); - --active: rgba(228, 222, 233, 0.1); - --message-hover: rgba(228, 222, 233, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #211e2a !important; - background: #95a6f4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-harmonic16-dark.css b/build/base16-harmonic16-dark.css index 63ac54b..acf035c 100644 --- a/build/base16-harmonic16-dark.css +++ b/build/base16-harmonic16-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #56bf8b; - --dnd-indicator: #bf8b56; - --idle-indicator: #8bbf56; - --streaming-indicator: #bf568b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8b56bf; - --accent-2: #8b56bf; - --accent-3: #8b56bf; - --accent-4: #568bbf; - --accent-5: #56bf8b; - --mention: rgba(139, 191, 86, 0.1); - --mention-hover: rgba(139, 191, 86, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0b1c2c; - --text-1: #e5ebf1; - --text-2: #e5ebf1; - --text-3: #cbd6e2; - --text-4: #aabcce; - --text-5: #627e99; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0b1c2c; /* Master background (Deepest) */ - --bg-3: #223b54; /* Secondary background */ - --bg-2: #405c79; /* Buttons and UI elements */ - --bg-1: #627e99; /* Active/Clicked states */ - - --hover: rgba(203, 214, 226, 0.05); - --active: rgba(203, 214, 226, 0.1); - --message-hover: rgba(203, 214, 226, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0b1c2c !important; - background: #8b56bf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-harmonic16-light.css b/build/base16-harmonic16-light.css index e7c88e3..acf035c 100644 --- a/build/base16-harmonic16-light.css +++ b/build/base16-harmonic16-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #56bf8b; - --dnd-indicator: #bf8b56; - --idle-indicator: #8bbf56; - --streaming-indicator: #bf568b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8b56bf; - --accent-2: #8b56bf; - --accent-3: #8b56bf; - --accent-4: #568bbf; - --accent-5: #56bf8b; - --mention: rgba(139, 191, 86, 0.1); - --mention-hover: rgba(139, 191, 86, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f7f9fb; - --text-1: #223b54; - --text-2: #223b54; - --text-3: #405c79; - --text-4: #627e99; - --text-5: #aabcce; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f7f9fb; /* Master background (Deepest) */ - --bg-3: #e5ebf1; /* Secondary background */ - --bg-2: #cbd6e2; /* Buttons and UI elements */ - --bg-1: #aabcce; /* Active/Clicked states */ - - --hover: rgba(64, 92, 121, 0.05); - --active: rgba(64, 92, 121, 0.1); - --message-hover: rgba(64, 92, 121, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f7f9fb !important; - background: #8b56bf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-heetch-light.css b/build/base16-heetch-light.css index 3e7d990..acf035c 100644 --- a/build/base16-heetch-light.css +++ b/build/base16-heetch-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5bb66a; - --dnd-indicator: #f80059; - --idle-indicator: #bd9701; - --streaming-indicator: #8f6c97; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5ba2b6; - --accent-2: #5ba2b6; - --accent-3: #5ba2b6; - --accent-4: #47f9f5; - --accent-5: #5bb66a; - --mention: rgba(189, 151, 1, 0.1); - --mention-hover: rgba(189, 151, 1, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #feffff; - --text-1: #392551; - --text-2: #392551; - --text-3: #5a496e; - --text-4: #7b6d8b; - --text-5: #9c92a8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #feffff; /* Master background (Deepest) */ - --bg-3: #dedae2; /* Secondary background */ - --bg-2: #bdb6c5; /* Buttons and UI elements */ - --bg-1: #9c92a8; /* Active/Clicked states */ - - --hover: rgba(90, 73, 110, 0.05); - --active: rgba(90, 73, 110, 0.1); - --message-hover: rgba(90, 73, 110, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #feffff !important; - background: #5ba2b6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-heetch.css b/build/base16-heetch.css index 6a8cb69..acf035c 100644 --- a/build/base16-heetch.css +++ b/build/base16-heetch.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c33678; - --dnd-indicator: #27d9d5; - --idle-indicator: #8f6c97; - --streaming-indicator: #82034c; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #bd0152; - --accent-2: #bd0152; - --accent-3: #bd0152; - --accent-4: #f80059; - --accent-5: #c33678; - --mention: rgba(143, 108, 151, 0.1); - --mention-hover: rgba(143, 108, 151, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #190134; - --text-1: #dedae2; - --text-2: #dedae2; - --text-3: #bdb6c5; - --text-4: #9c92a8; - --text-5: #7b6d8b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #190134; /* Master background (Deepest) */ - --bg-3: #392551; /* Secondary background */ - --bg-2: #5a496e; /* Buttons and UI elements */ - --bg-1: #7b6d8b; /* Active/Clicked states */ - - --hover: rgba(189, 182, 197, 0.05); - --active: rgba(189, 182, 197, 0.1); - --message-hover: rgba(189, 182, 197, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #190134 !important; - background: #bd0152 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-helios.css b/build/base16-helios.css index 03ed466..acf035c 100644 --- a/build/base16-helios.css +++ b/build/base16-helios.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #88b92d; - --dnd-indicator: #d72638; - --idle-indicator: #f19d1a; - --streaming-indicator: #be4264; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #1e8bac; - --accent-2: #1e8bac; - --accent-3: #1e8bac; - --accent-4: #1ba595; - --accent-5: #88b92d; - --mention: rgba(241, 157, 26, 0.1); - --mention-hover: rgba(241, 157, 26, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d2021; - --text-1: #dddddd; - --text-2: #dddddd; - --text-3: #d5d5d5; - --text-4: #cdcdcd; - --text-5: #6f7579; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d2021; /* Master background (Deepest) */ - --bg-3: #383c3e; /* Secondary background */ - --bg-2: #53585b; /* Buttons and UI elements */ - --bg-1: #6f7579; /* Active/Clicked states */ - - --hover: rgba(213, 213, 213, 0.05); - --active: rgba(213, 213, 213, 0.1); - --message-hover: rgba(213, 213, 213, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d2021 !important; - background: #1e8bac !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-hopscotch.css b/build/base16-hopscotch.css index 7b7bf7f..acf035c 100644 --- a/build/base16-hopscotch.css +++ b/build/base16-hopscotch.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8fc13e; - --dnd-indicator: #dd464c; - --idle-indicator: #fdcc59; - --streaming-indicator: #c85e7c; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #1290bf; - --accent-2: #1290bf; - --accent-3: #1290bf; - --accent-4: #149b93; - --accent-5: #8fc13e; - --mention: rgba(253, 204, 89, 0.1); - --mention-hover: rgba(253, 204, 89, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #322931; - --text-1: #d5d3d5; - --text-2: #d5d3d5; - --text-3: #b9b5b8; - --text-4: #989498; - --text-5: #797379; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #322931; /* Master background (Deepest) */ - --bg-3: #433b42; /* Secondary background */ - --bg-2: #5c545b; /* Buttons and UI elements */ - --bg-1: #797379; /* Active/Clicked states */ - - --hover: rgba(185, 181, 184, 0.05); - --active: rgba(185, 181, 184, 0.1); - --message-hover: rgba(185, 181, 184, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #322931 !important; - background: #1290bf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-horizon-dark.css b/build/base16-horizon-dark.css index a4369c0..acf035c 100644 --- a/build/base16-horizon-dark.css +++ b/build/base16-horizon-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #efaf8e; - --dnd-indicator: #e93c58; - --idle-indicator: #efb993; - --streaming-indicator: #b072d1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #df5273; - --accent-2: #df5273; - --accent-3: #df5273; - --accent-4: #24a8b4; - --accent-5: #efaf8e; - --mention: rgba(239, 185, 147, 0.1); - --mention-hover: rgba(239, 185, 147, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1e26; - --text-1: #dcdfe4; - --text-2: #dcdfe4; - --text-3: #cbced0; - --text-4: #9da0a2; - --text-5: #6f6f70; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1e26; /* Master background (Deepest) */ - --bg-3: #232530; /* Secondary background */ - --bg-2: #2e303e; /* Buttons and UI elements */ - --bg-1: #6f6f70; /* Active/Clicked states */ - - --hover: rgba(203, 206, 208, 0.05); - --active: rgba(203, 206, 208, 0.1); - --message-hover: rgba(203, 206, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1e26 !important; - background: #df5273 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-horizon-light.css b/build/base16-horizon-light.css index 8db7436..acf035c 100644 --- a/build/base16-horizon-light.css +++ b/build/base16-horizon-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #94e1b0; - --dnd-indicator: #f7939b; - --idle-indicator: #fbe0d9; - --streaming-indicator: #1d8991; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #da103f; - --accent-2: #da103f; - --accent-3: #da103f; - --accent-4: #dc3318; - --accent-5: #94e1b0; - --mention: rgba(251, 224, 217, 0.1); - --mention-hover: rgba(251, 224, 217, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fdf0ed; - --text-1: #302c2d; - --text-2: #302c2d; - --text-3: #403c3d; - --text-4: #948c8a; - --text-5: #bdb3b1; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fdf0ed; /* Master background (Deepest) */ - --bg-3: #fadad1; /* Secondary background */ - --bg-2: #f9cbbe; /* Buttons and UI elements */ - --bg-1: #bdb3b1; /* Active/Clicked states */ - - --hover: rgba(64, 60, 61, 0.05); - --active: rgba(64, 60, 61, 0.1); - --message-hover: rgba(64, 60, 61, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fdf0ed !important; - background: #da103f !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-horizon-terminal-dark.css b/build/base16-horizon-terminal-dark.css index 0bc7da6..acf035c 100644 --- a/build/base16-horizon-terminal-dark.css +++ b/build/base16-horizon-terminal-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #29d398; - --dnd-indicator: #e95678; - --idle-indicator: #fac29a; - --streaming-indicator: #ee64ac; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #26bbd9; - --accent-2: #26bbd9; - --accent-3: #26bbd9; - --accent-4: #59e1e3; - --accent-5: #29d398; - --mention: rgba(250, 194, 154, 0.1); - --mention-hover: rgba(250, 194, 154, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1e26; - --text-1: #dcdfe4; - --text-2: #dcdfe4; - --text-3: #cbced0; - --text-4: #9da0a2; - --text-5: #6f6f70; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1e26; /* Master background (Deepest) */ - --bg-3: #232530; /* Secondary background */ - --bg-2: #2e303e; /* Buttons and UI elements */ - --bg-1: #6f6f70; /* Active/Clicked states */ - - --hover: rgba(203, 206, 208, 0.05); - --active: rgba(203, 206, 208, 0.1); - --message-hover: rgba(203, 206, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1e26 !important; - background: #26bbd9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-horizon-terminal-light.css b/build/base16-horizon-terminal-light.css index 5dd0235..acf035c 100644 --- a/build/base16-horizon-terminal-light.css +++ b/build/base16-horizon-terminal-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #29d398; - --dnd-indicator: #e95678; - --idle-indicator: #fadad1; - --streaming-indicator: #ee64ac; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #26bbd9; - --accent-2: #26bbd9; - --accent-3: #26bbd9; - --accent-4: #59e1e3; - --accent-5: #29d398; - --mention: rgba(250, 218, 209, 0.1); - --mention-hover: rgba(250, 218, 209, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fdf0ed; - --text-1: #302c2d; - --text-2: #302c2d; - --text-3: #403c3d; - --text-4: #948c8a; - --text-5: #bdb3b1; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fdf0ed; /* Master background (Deepest) */ - --bg-3: #fadad1; /* Secondary background */ - --bg-2: #f9cbbe; /* Buttons and UI elements */ - --bg-1: #bdb3b1; /* Active/Clicked states */ - - --hover: rgba(64, 60, 61, 0.05); - --active: rgba(64, 60, 61, 0.1); - --message-hover: rgba(64, 60, 61, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fdf0ed !important; - background: #26bbd9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-humanoid-dark.css b/build/base16-humanoid-dark.css index 355d175..acf035c 100644 --- a/build/base16-humanoid-dark.css +++ b/build/base16-humanoid-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #02d849; - --dnd-indicator: #f11235; - --idle-indicator: #ffb627; - --streaming-indicator: #f15ee3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00a6fb; - --accent-2: #00a6fb; - --accent-3: #00a6fb; - --accent-4: #0dd9d6; - --accent-5: #02d849; - --mention: rgba(255, 182, 39, 0.1); - --mention-hover: rgba(255, 182, 39, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #232629; - --text-1: #fcfcf6; - --text-2: #fcfcf6; - --text-3: #f8f8f2; - --text-4: #c0c0bd; - --text-5: #60615d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #232629; /* Master background (Deepest) */ - --bg-3: #333b3d; /* Secondary background */ - --bg-2: #484e54; /* Buttons and UI elements */ - --bg-1: #60615d; /* Active/Clicked states */ - - --hover: rgba(248, 248, 242, 0.05); - --active: rgba(248, 248, 242, 0.1); - --message-hover: rgba(248, 248, 242, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #232629 !important; - background: #00a6fb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-humanoid-light.css b/build/base16-humanoid-light.css index 1e2d4ba..acf035c 100644 --- a/build/base16-humanoid-light.css +++ b/build/base16-humanoid-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #388e3c; - --dnd-indicator: #b0151a; - --idle-indicator: #ffb627; - --streaming-indicator: #700f98; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0082c9; - --accent-2: #0082c9; - --accent-3: #0082c9; - --accent-4: #008e8e; - --accent-5: #388e3c; - --mention: rgba(255, 182, 39, 0.1); - --mention-hover: rgba(255, 182, 39, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f8f8f2; - --text-1: #2f3337; - --text-2: #2f3337; - --text-3: #232629; - --text-4: #60615d; - --text-5: #c0c0bd; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f8f8f2; /* Master background (Deepest) */ - --bg-3: #efefe9; /* Secondary background */ - --bg-2: #deded8; /* Buttons and UI elements */ - --bg-1: #c0c0bd; /* Active/Clicked states */ - - --hover: rgba(35, 38, 41, 0.05); - --active: rgba(35, 38, 41, 0.1); - --message-hover: rgba(35, 38, 41, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f8f8f2 !important; - background: #0082c9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ia-dark.css b/build/base16-ia-dark.css index 45ea87e..acf035c 100644 --- a/build/base16-ia-dark.css +++ b/build/base16-ia-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #83a471; - --dnd-indicator: #d88568; - --idle-indicator: #b99353; - --streaming-indicator: #b98eb2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8eccdd; - --accent-2: #8eccdd; - --accent-3: #8eccdd; - --accent-4: #7c9cae; - --accent-5: #83a471; - --mention: rgba(185, 147, 83, 0.1); - --mention-hover: rgba(185, 147, 83, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1a1a1a; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #cccccc; - --text-4: #b8b8b8; - --text-5: #767676; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1a1a1a; /* Master background (Deepest) */ - --bg-3: #222222; /* Secondary background */ - --bg-2: #1d414d; /* Buttons and UI elements */ - --bg-1: #767676; /* Active/Clicked states */ - - --hover: rgba(204, 204, 204, 0.05); - --active: rgba(204, 204, 204, 0.1); - --message-hover: rgba(204, 204, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1a1a1a !important; - background: #8eccdd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ia-light.css b/build/base16-ia-light.css index 5ffd0e2..acf035c 100644 --- a/build/base16-ia-light.css +++ b/build/base16-ia-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #38781c; - --dnd-indicator: #9c5a02; - --idle-indicator: #c48218; - --streaming-indicator: #a94598; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #48bac2; - --accent-2: #48bac2; - --accent-3: #48bac2; - --accent-4: #2d6bb1; - --accent-5: #38781c; - --mention: rgba(196, 130, 24, 0.1); - --mention-hover: rgba(196, 130, 24, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f6f6f6; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #181818; - --text-4: #767676; - --text-5: #898989; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f6f6f6; /* Master background (Deepest) */ - --bg-3: #dedede; /* Secondary background */ - --bg-2: #bde5f2; /* Buttons and UI elements */ - --bg-1: #898989; /* Active/Clicked states */ - - --hover: rgba(24, 24, 24, 0.05); - --active: rgba(24, 24, 24, 0.1); - --message-hover: rgba(24, 24, 24, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f6f6f6 !important; - background: #48bac2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-icy.css b/build/base16-icy.css index 840d107..acf035c 100644 --- a/build/base16-icy.css +++ b/build/base16-icy.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4dd0e1; - --dnd-indicator: #16c1d9; - --idle-indicator: #80deea; - --streaming-indicator: #00acc1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00bcd4; - --accent-2: #00bcd4; - --accent-3: #00bcd4; - --accent-4: #26c6da; - --accent-5: #4dd0e1; - --mention: rgba(128, 222, 234, 0.1); - --mention-hover: rgba(128, 222, 234, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #021012; - --text-1: #0c7c8c; - --text-2: #0c7c8c; - --text-3: #095b67; - --text-4: #064048; - --text-5: #052e34; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #021012; /* Master background (Deepest) */ - --bg-3: #031619; /* Secondary background */ - --bg-2: #041f23; /* Buttons and UI elements */ - --bg-1: #052e34; /* Active/Clicked states */ - - --hover: rgba(9, 91, 103, 0.05); - --active: rgba(9, 91, 103, 0.1); - --message-hover: rgba(9, 91, 103, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #021012 !important; - background: #00bcd4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-irblack.css b/build/base16-irblack.css index 1e38d54..acf035c 100644 --- a/build/base16-irblack.css +++ b/build/base16-irblack.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a8ff60; - --dnd-indicator: #ff6c60; - --idle-indicator: #ffffb6; - --streaming-indicator: #ff73fd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #96cbfe; - --accent-2: #96cbfe; - --accent-3: #96cbfe; - --accent-4: #c6c5fe; - --accent-5: #a8ff60; - --mention: rgba(255, 255, 182, 0.1); - --mention-hover: rgba(255, 255, 182, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #d9d7cc; - --text-2: #d9d7cc; - --text-3: #b5b3aa; - --text-4: #918f88; - --text-5: #6c6c66; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #242422; /* Secondary background */ - --bg-2: #484844; /* Buttons and UI elements */ - --bg-1: #6c6c66; /* Active/Clicked states */ - - --hover: rgba(181, 179, 170, 0.05); - --active: rgba(181, 179, 170, 0.1); - --message-hover: rgba(181, 179, 170, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #96cbfe !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-isotope.css b/build/base16-isotope.css index 71f4633..acf035c 100644 --- a/build/base16-isotope.css +++ b/build/base16-isotope.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #33ff00; - --dnd-indicator: #ff0000; - --idle-indicator: #ff0099; - --streaming-indicator: #cc00ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0066ff; - --accent-2: #0066ff; - --accent-3: #0066ff; - --accent-4: #00ffff; - --accent-5: #33ff00; - --mention: rgba(255, 0, 153, 0.1); - --mention-hover: rgba(255, 0, 153, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #c0c0c0; - --text-5: #808080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #404040; /* Secondary background */ - --bg-2: #606060; /* Buttons and UI elements */ - --bg-1: #808080; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #0066ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-jabuti.css b/build/base16-jabuti.css index c35d4dc..acf035c 100644 --- a/build/base16-jabuti.css +++ b/build/base16-jabuti.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #3fdaa4; - --dnd-indicator: #ec6a88; - --idle-indicator: #e1c697; - --streaming-indicator: #be95ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3fc6de; - --accent-2: #3fc6de; - --accent-3: #3fc6de; - --accent-4: #ff7eb6; - --accent-5: #3fdaa4; - --mention: rgba(225, 198, 151, 0.1); - --mention-hover: rgba(225, 198, 151, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292a37; - --text-1: #d9e0ee; - --text-2: #d9e0ee; - --text-3: #c0cbe3; - --text-4: #50526b; - --text-5: #45475d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292a37; /* Master background (Deepest) */ - --bg-3: #343545; /* Secondary background */ - --bg-2: #3c3e51; /* Buttons and UI elements */ - --bg-1: #45475d; /* Active/Clicked states */ - - --hover: rgba(192, 203, 227, 0.05); - --active: rgba(192, 203, 227, 0.1); - --message-hover: rgba(192, 203, 227, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292a37 !important; - background: #3fc6de !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-jellybeans.css b/build/base16-jellybeans.css index ef6dbfe..acf035c 100644 --- a/build/base16-jellybeans.css +++ b/build/base16-jellybeans.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #bddeab; - --dnd-indicator: #ffa1a1; - --idle-indicator: #ffdca0; - --streaming-indicator: #fbdaff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b1d8f6; - --accent-2: #b1d8f6; - --accent-3: #b1d8f6; - --accent-4: #1ab2a8; - --accent-5: #bddeab; - --mention: rgba(255, 220, 160, 0.1); - --mention-hover: rgba(255, 220, 160, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #121212; - --text-1: #dedede; - --text-2: #dedede; - --text-3: #d5d5d5; - --text-4: #cdcdcd; - --text-5: #c5c5c5; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #121212; /* Master background (Deepest) */ - --bg-3: #929292; /* Secondary background */ - --bg-2: #bdbdbd; /* Buttons and UI elements */ - --bg-1: #c5c5c5; /* Active/Clicked states */ - - --hover: rgba(213, 213, 213, 0.05); - --active: rgba(213, 213, 213, 0.1); - --message-hover: rgba(213, 213, 213, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #121212 !important; - background: #b1d8f6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-kanagawa-dragon.css b/build/base16-kanagawa-dragon.css index 9904618..acf035c 100644 --- a/build/base16-kanagawa-dragon.css +++ b/build/base16-kanagawa-dragon.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8a9a7b; - --dnd-indicator: #c4746e; - --idle-indicator: #c4b28a; - --streaming-indicator: #a292a3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8ba4b0; - --accent-2: #8ba4b0; - --accent-3: #8ba4b0; - --accent-4: #8ea4a2; - --accent-5: #8a9a7b; - --mention: rgba(196, 178, 138, 0.1); - --mention-hover: rgba(196, 178, 138, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181616; - --text-1: #c8c093; - --text-2: #c8c093; - --text-3: #c5c9c5; - --text-4: #737c73; - --text-5: #625e5a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181616; /* Master background (Deepest) */ - --bg-3: #282727; /* Secondary background */ - --bg-2: #393836; /* Buttons and UI elements */ - --bg-1: #625e5a; /* Active/Clicked states */ - - --hover: rgba(197, 201, 197, 0.05); - --active: rgba(197, 201, 197, 0.1); - --message-hover: rgba(197, 201, 197, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181616 !important; - background: #8ba4b0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-kanagawa.css b/build/base16-kanagawa.css index c78577b..acf035c 100644 --- a/build/base16-kanagawa.css +++ b/build/base16-kanagawa.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #76946a; - --dnd-indicator: #c34043; - --idle-indicator: #c0a36e; - --streaming-indicator: #957fb8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7e9cd8; - --accent-2: #7e9cd8; - --accent-3: #7e9cd8; - --accent-4: #6a9589; - --accent-5: #76946a; - --mention: rgba(192, 163, 110, 0.1); - --mention-hover: rgba(192, 163, 110, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1f1f28; - --text-1: #c8c093; - --text-2: #c8c093; - --text-3: #dcd7ba; - --text-4: #727169; - --text-5: #54546d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1f1f28; /* Master background (Deepest) */ - --bg-3: #16161d; /* Secondary background */ - --bg-2: #223249; /* Buttons and UI elements */ - --bg-1: #54546d; /* Active/Clicked states */ - - --hover: rgba(220, 215, 186, 0.05); - --active: rgba(220, 215, 186, 0.1); - --message-hover: rgba(220, 215, 186, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1f1f28 !important; - background: #7e9cd8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-katy.css b/build/base16-katy.css index 77ee3d8..acf035c 100644 --- a/build/base16-katy.css +++ b/build/base16-katy.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #78c06e; - --dnd-indicator: #6e98e1; - --idle-indicator: #e0a557; - --streaming-indicator: #c792ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #83b7e5; - --accent-5: #78c06e; - --mention: rgba(224, 165, 87, 0.1); - --mention-hover: rgba(224, 165, 87, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292d3e; - --text-1: #959dcb; - --text-2: #959dcb; - --text-3: #959dcb; - --text-4: #8796b0; - --text-5: #676e95; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292d3e; /* Master background (Deepest) */ - --bg-3: #444267; /* Secondary background */ - --bg-2: #5c598b; /* Buttons and UI elements */ - --bg-1: #676e95; /* Active/Clicked states */ - - --hover: rgba(149, 157, 203, 0.05); - --active: rgba(149, 157, 203, 0.1); - --message-hover: rgba(149, 157, 203, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292d3e !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-kimber.css b/build/base16-kimber.css index 081df8d..acf035c 100644 --- a/build/base16-kimber.css +++ b/build/base16-kimber.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #99c899; - --dnd-indicator: #c88c8c; - --idle-indicator: #d8b56d; - --streaming-indicator: #86cacd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #537c9c; - --accent-2: #537c9c; - --accent-3: #537c9c; - --accent-4: #78b4b4; - --accent-5: #99c899; - --mention: rgba(216, 181, 109, 0.1); - --mention-hover: rgba(216, 181, 109, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #222222; - --text-1: #c3c3b4; - --text-2: #c3c3b4; - --text-3: #dedee7; - --text-4: #5a5a5a; - --text-5: #644646; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #222222; /* Master background (Deepest) */ - --bg-3: #313131; /* Secondary background */ - --bg-2: #555d55; /* Buttons and UI elements */ - --bg-1: #644646; /* Active/Clicked states */ - - --hover: rgba(222, 222, 231, 0.05); - --active: rgba(222, 222, 231, 0.1); - --message-hover: rgba(222, 222, 231, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #222222 !important; - background: #537c9c !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-kissa-latte.css b/build/base16-kissa-latte.css index 4d063c7..acf035c 100644 --- a/build/base16-kissa-latte.css +++ b/build/base16-kissa-latte.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #387050; - --dnd-indicator: #9e3e3e; - --idle-indicator: #7d6820; - --streaming-indicator: #6438a0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3468a8; - --accent-2: #3468a8; - --accent-3: #3468a8; - --accent-4: #287070; - --accent-5: #387050; - --mention: rgba(125, 104, 32, 0.1); - --mention-hover: rgba(125, 104, 32, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f4f0; - --text-1: #6e6459; - --text-2: #6e6459; - --text-3: #1f1c16; - --text-4: #746c62; - --text-5: #91887d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f4f0; /* Master background (Deepest) */ - --bg-3: #e8e7e3; /* Secondary background */ - --bg-2: #d5d2cb; /* Buttons and UI elements */ - --bg-1: #91887d; /* Active/Clicked states */ - - --hover: rgba(31, 28, 22, 0.05); - --active: rgba(31, 28, 22, 0.1); - --message-hover: rgba(31, 28, 22, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f4f0 !important; - background: #3468a8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-kissa-macchiato.css b/build/base16-kissa-macchiato.css index a3942ab..acf035c 100644 --- a/build/base16-kissa-macchiato.css +++ b/build/base16-kissa-macchiato.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8cb870; - --dnd-indicator: #e87777; - --idle-indicator: #eac67a; - --streaming-indicator: #b094cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7fa8d4; - --accent-2: #7fa8d4; - --accent-3: #7fa8d4; - --accent-4: #6ab8b0; - --accent-5: #8cb870; - --mention: rgba(234, 198, 122, 0.1); - --mention-hover: rgba(234, 198, 122, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1f1c16; - --text-1: #e8d5b7; - --text-2: #e8d5b7; - --text-3: #faf0e6; - --text-4: #d4c4a8; - --text-5: #b8a48c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1f1c16; /* Master background (Deepest) */ - --bg-3: #35322d; /* Secondary background */ - --bg-2: #47443f; /* Buttons and UI elements */ - --bg-1: #b8a48c; /* Active/Clicked states */ - - --hover: rgba(250, 240, 230, 0.05); - --active: rgba(250, 240, 230, 0.1); - --message-hover: rgba(250, 240, 230, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1f1c16 !important; - background: #7fa8d4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-lichen-chartreuse-dark.css b/build/base16-lichen-chartreuse-dark.css index 8f2de10..acf035c 100644 --- a/build/base16-lichen-chartreuse-dark.css +++ b/build/base16-lichen-chartreuse-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #83bda5; - --dnd-indicator: #e28b82; - --idle-indicator: #b2d084; - --streaming-indicator: #bfa6d4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #78adc4; - --accent-2: #78adc4; - --accent-3: #78adc4; - --accent-4: #9cc6c9; - --accent-5: #83bda5; - --mention: rgba(178, 208, 132, 0.1); - --mention-hover: rgba(178, 208, 132, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #151613; - --text-1: #ecefe7; - --text-2: #ecefe7; - --text-3: #e0e5da; - --text-4: #a0a598; - --text-5: #899282; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #151613; /* Master background (Deepest) */ - --bg-3: #1c1e1a; /* Secondary background */ - --bg-2: #3e5123; /* Buttons and UI elements */ - --bg-1: #899282; /* Active/Clicked states */ - - --hover: rgba(224, 229, 218, 0.05); - --active: rgba(224, 229, 218, 0.1); - --message-hover: rgba(224, 229, 218, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #151613 !important; - background: #78adc4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-lichen-chartreuse-light.css b/build/base16-lichen-chartreuse-light.css index 87ef740..acf035c 100644 --- a/build/base16-lichen-chartreuse-light.css +++ b/build/base16-lichen-chartreuse-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2f7462; - --dnd-indicator: #a34740; - --idle-indicator: #506b29; - --streaming-indicator: #6e5689; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #356e8a; - --accent-2: #356e8a; - --accent-3: #356e8a; - --accent-4: #356569; - --accent-5: #2f7462; - --mention: rgba(80, 107, 41, 0.1); - --mention-hover: rgba(80, 107, 41, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f7f2; - --text-1: #232420; - --text-2: #232420; - --text-3: #2d302b; - --text-4: #4e5149; - --text-5: #687161; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f7f2; /* Master background (Deepest) */ - --bg-3: #ecefe7; /* Secondary background */ - --bg-2: #cfe4ae; /* Buttons and UI elements */ - --bg-1: #687161; /* Active/Clicked states */ - - --hover: rgba(45, 48, 43, 0.05); - --active: rgba(45, 48, 43, 0.1); - --message-hover: rgba(45, 48, 43, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f7f2 !important; - background: #356e8a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-lime.css b/build/base16-lime.css index 8a48603..acf035c 100644 --- a/build/base16-lime.css +++ b/build/base16-lime.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8cd97c; - --dnd-indicator: #ff662a; - --idle-indicator: #ffd15e; - --streaming-indicator: #1b825f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2b926f; - --accent-2: #2b926f; - --accent-3: #2b926f; - --accent-4: #4cad83; - --accent-5: #8cd97c; - --mention: rgba(255, 209, 94, 0.1); - --mention-hover: rgba(255, 209, 94, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1a1a2f; - --text-1: #fff2d1; - --text-2: #fff2d1; - --text-3: #818175; - --text-4: #515155; - --text-5: #313140; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1a1a2f; /* Master background (Deepest) */ - --bg-3: #202030; /* Secondary background */ - --bg-2: #2a2a3f; /* Buttons and UI elements */ - --bg-1: #313140; /* Active/Clicked states */ - - --hover: rgba(129, 129, 117, 0.05); - --active: rgba(129, 129, 117, 0.1); - --message-hover: rgba(129, 129, 117, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1a1a2f !important; - background: #2b926f !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-linux-vt.css b/build/base16-linux-vt.css index dcc2c4e..acf035c 100644 --- a/build/base16-linux-vt.css +++ b/build/base16-linux-vt.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00aa00; - --dnd-indicator: #aa0000; - --idle-indicator: #ffff55; - --streaming-indicator: #ff55ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5555ff; - --accent-2: #5555ff; - --accent-3: #5555ff; - --accent-4: #00aaaa; - --accent-5: #00aa00; - --mention: rgba(255, 255, 85, 0.1); - --mention-hover: rgba(255, 255, 85, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #cccccc; - --text-2: #cccccc; - --text-3: #aaaaaa; - --text-4: #888888; - --text-5: #555555; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #333333; /* Secondary background */ - --bg-2: #444444; /* Buttons and UI elements */ - --bg-1: #555555; /* Active/Clicked states */ - - --hover: rgba(170, 170, 170, 0.05); - --active: rgba(170, 170, 170, 0.1); - --message-hover: rgba(170, 170, 170, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #5555ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-macintosh.css b/build/base16-macintosh.css index 80406e1..acf035c 100644 --- a/build/base16-macintosh.css +++ b/build/base16-macintosh.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #1fb714; - --dnd-indicator: #dd0907; - --idle-indicator: #fbf305; - --streaming-indicator: #4700a5; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0000d3; - --accent-2: #0000d3; - --accent-3: #0000d3; - --accent-4: #02abea; - --accent-5: #1fb714; - --mention: rgba(251, 243, 5, 0.1); - --mention-hover: rgba(251, 243, 5, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #c0c0c0; - --text-2: #c0c0c0; - --text-3: #c0c0c0; - --text-4: #808080; - --text-5: #808080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #404040; /* Secondary background */ - --bg-2: #404040; /* Buttons and UI elements */ - --bg-1: #808080; /* Active/Clicked states */ - - --hover: rgba(192, 192, 192, 0.05); - --active: rgba(192, 192, 192, 0.1); - --message-hover: rgba(192, 192, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #0000d3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-marrakesh.css b/build/base16-marrakesh.css index b0d2ca9..acf035c 100644 --- a/build/base16-marrakesh.css +++ b/build/base16-marrakesh.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #18974e; - --dnd-indicator: #c35359; - --idle-indicator: #a88339; - --streaming-indicator: #8868b3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #477ca1; - --accent-2: #477ca1; - --accent-3: #477ca1; - --accent-4: #75a738; - --accent-5: #18974e; - --mention: rgba(168, 131, 57, 0.1); - --mention-hover: rgba(168, 131, 57, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #201602; - --text-1: #ccc37a; - --text-2: #ccc37a; - --text-3: #948e48; - --text-4: #86813b; - --text-5: #6c6823; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #201602; /* Master background (Deepest) */ - --bg-3: #302e00; /* Secondary background */ - --bg-2: #5f5b17; /* Buttons and UI elements */ - --bg-1: #6c6823; /* Active/Clicked states */ - - --hover: rgba(148, 142, 72, 0.05); - --active: rgba(148, 142, 72, 0.1); - --message-hover: rgba(148, 142, 72, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #201602 !important; - background: #477ca1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-materia.css b/build/base16-materia.css index 12efcc1..acf035c 100644 --- a/build/base16-materia.css +++ b/build/base16-materia.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8bd649; - --dnd-indicator: #ec5f67; - --idle-indicator: #ffcc00; - --streaming-indicator: #82aaff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #89ddff; - --accent-2: #89ddff; - --accent-3: #89ddff; - --accent-4: #80cbc4; - --accent-5: #8bd649; - --mention: rgba(255, 204, 0, 0.1); - --mention-hover: rgba(255, 204, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #263238; - --text-1: #d5dbe5; - --text-2: #d5dbe5; - --text-3: #cdd3de; - --text-4: #c9ccd3; - --text-5: #707880; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #263238; /* Master background (Deepest) */ - --bg-3: #2c393f; /* Secondary background */ - --bg-2: #37474f; /* Buttons and UI elements */ - --bg-1: #707880; /* Active/Clicked states */ - - --hover: rgba(205, 211, 222, 0.05); - --active: rgba(205, 211, 222, 0.1); - --message-hover: rgba(205, 211, 222, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #263238 !important; - background: #89ddff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-material-darker.css b/build/base16-material-darker.css index 545fba7..acf035c 100644 --- a/build/base16-material-darker.css +++ b/build/base16-material-darker.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c3e88d; - --dnd-indicator: #f07178; - --idle-indicator: #ffcb6b; - --streaming-indicator: #c792ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #89ddff; - --accent-5: #c3e88d; - --mention: rgba(255, 203, 107, 0.1); - --mention-hover: rgba(255, 203, 107, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #212121; - --text-1: #eeffff; - --text-2: #eeffff; - --text-3: #eeffff; - --text-4: #b2ccd6; - --text-5: #4a4a4a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #212121; /* Master background (Deepest) */ - --bg-3: #303030; /* Secondary background */ - --bg-2: #353535; /* Buttons and UI elements */ - --bg-1: #4a4a4a; /* Active/Clicked states */ - - --hover: rgba(238, 255, 255, 0.05); - --active: rgba(238, 255, 255, 0.1); - --message-hover: rgba(238, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #212121 !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-material-lighter.css b/build/base16-material-lighter.css index 045fd89..acf035c 100644 --- a/build/base16-material-lighter.css +++ b/build/base16-material-lighter.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #91b859; - --dnd-indicator: #ff5370; - --idle-indicator: #ffb62c; - --streaming-indicator: #7c4dff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6182b8; - --accent-2: #6182b8; - --accent-3: #6182b8; - --accent-4: #39adb5; - --accent-5: #91b859; - --mention: rgba(255, 182, 44, 0.1); - --mention-hover: rgba(255, 182, 44, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fafafa; - --text-1: #43a39a; - --text-2: #43a39a; - --text-3: #80cbc4; - --text-4: #8796b0; - --text-5: #ccd7da; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fafafa; /* Master background (Deepest) */ - --bg-3: #e7eaec; /* Secondary background */ - --bg-2: #cceae7; /* Buttons and UI elements */ - --bg-1: #ccd7da; /* Active/Clicked states */ - - --hover: rgba(128, 203, 196, 0.05); - --active: rgba(128, 203, 196, 0.1); - --message-hover: rgba(128, 203, 196, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fafafa !important; - background: #6182b8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-material-palenight.css b/build/base16-material-palenight.css index a71cbd7..acf035c 100644 --- a/build/base16-material-palenight.css +++ b/build/base16-material-palenight.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c3e88d; - --dnd-indicator: #f07178; - --idle-indicator: #ffcb6b; - --streaming-indicator: #c792ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #89ddff; - --accent-5: #c3e88d; - --mention: rgba(255, 203, 107, 0.1); - --mention-hover: rgba(255, 203, 107, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292d3e; - --text-1: #959dcb; - --text-2: #959dcb; - --text-3: #959dcb; - --text-4: #8796b0; - --text-5: #676e95; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292d3e; /* Master background (Deepest) */ - --bg-3: #444267; /* Secondary background */ - --bg-2: #32374d; /* Buttons and UI elements */ - --bg-1: #676e95; /* Active/Clicked states */ - - --hover: rgba(149, 157, 203, 0.05); - --active: rgba(149, 157, 203, 0.1); - --message-hover: rgba(149, 157, 203, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292d3e !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-material-vivid.css b/build/base16-material-vivid.css index a8ebb25..acf035c 100644 --- a/build/base16-material-vivid.css +++ b/build/base16-material-vivid.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00e676; - --dnd-indicator: #f44336; - --idle-indicator: #ffeb3b; - --streaming-indicator: #673ab7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2196f3; - --accent-2: #2196f3; - --accent-3: #2196f3; - --accent-4: #00bcd4; - --accent-5: #00e676; - --mention: rgba(255, 235, 59, 0.1); - --mention-hover: rgba(255, 235, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #202124; - --text-1: #9e9e9e; - --text-2: #9e9e9e; - --text-3: #80868b; - --text-4: #676c71; - --text-5: #44464d; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #202124; /* Master background (Deepest) */ - --bg-3: #27292c; /* Secondary background */ - --bg-2: #323639; /* Buttons and UI elements */ - --bg-1: #44464d; /* Active/Clicked states */ - - --hover: rgba(128, 134, 139, 0.05); - --active: rgba(128, 134, 139, 0.1); - --message-hover: rgba(128, 134, 139, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #202124 !important; - background: #2196f3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-material.css b/build/base16-material.css index fc4d7a7..acf035c 100644 --- a/build/base16-material.css +++ b/build/base16-material.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c3e88d; - --dnd-indicator: #f07178; - --idle-indicator: #ffcb6b; - --streaming-indicator: #c792ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #89ddff; - --accent-5: #c3e88d; - --mention: rgba(255, 203, 107, 0.1); - --mention-hover: rgba(255, 203, 107, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #263238; - --text-1: #eeffff; - --text-2: #eeffff; - --text-3: #eeffff; - --text-4: #b2ccd6; - --text-5: #546e7a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #263238; /* Master background (Deepest) */ - --bg-3: #2e3c43; /* Secondary background */ - --bg-2: #314549; /* Buttons and UI elements */ - --bg-1: #546e7a; /* Active/Clicked states */ - - --hover: rgba(238, 255, 255, 0.05); - --active: rgba(238, 255, 255, 0.1); - --message-hover: rgba(238, 255, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #263238 !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-measured-dark.css b/build/base16-measured-dark.css index c66b02a..acf035c 100644 --- a/build/base16-measured-dark.css +++ b/build/base16-measured-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #56c16f; - --dnd-indicator: #ce7e8e; - --idle-indicator: #bfac4e; - --streaming-indicator: #b39be0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #88b0da; - --accent-2: #88b0da; - --accent-3: #88b0da; - --accent-4: #62c0be; - --accent-5: #56c16f; - --mention: rgba(191, 172, 78, 0.1); - --mention-hover: rgba(191, 172, 78, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #00211f; - --text-1: #efefef; - --text-2: #efefef; - --text-3: #dcdcdc; - --text-4: #c3c3c3; - --text-5: #ababab; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #00211f; /* Master background (Deepest) */ - --bg-3: #003a38; /* Secondary background */ - --bg-2: #005453; /* Buttons and UI elements */ - --bg-1: #ababab; /* Active/Clicked states */ - - --hover: rgba(220, 220, 220, 0.05); - --active: rgba(220, 220, 220, 0.1); - --message-hover: rgba(220, 220, 220, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #00211f !important; - background: #88b0da !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-measured-light.css b/build/base16-measured-light.css index 6de2aed..acf035c 100644 --- a/build/base16-measured-light.css +++ b/build/base16-measured-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0c680c; - --dnd-indicator: #ac1f35; - --idle-indicator: #645a00; - --streaming-indicator: #6645c2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0158ad; - --accent-2: #0158ad; - --accent-3: #0158ad; - --accent-4: #01716f; - --accent-5: #0c680c; - --mention: rgba(100, 90, 0, 0.1); - --mention-hover: rgba(100, 90, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fdf9f5; - --text-1: #181818; - --text-2: #181818; - --text-3: #292929; - --text-4: #404040; - --text-5: #5a5a5a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fdf9f5; /* Master background (Deepest) */ - --bg-3: #f9f5f1; /* Secondary background */ - --bg-2: #ffeada; /* Buttons and UI elements */ - --bg-1: #5a5a5a; /* Active/Clicked states */ - - --hover: rgba(41, 41, 41, 0.05); - --active: rgba(41, 41, 41, 0.1); - --message-hover: rgba(41, 41, 41, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fdf9f5 !important; - background: #0158ad !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-mellow-purple.css b/build/base16-mellow-purple.css index b8c6a42..acf035c 100644 --- a/build/base16-mellow-purple.css +++ b/build/base16-mellow-purple.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #05cb0d; - --dnd-indicator: #00d9e9; - --idle-indicator: #955ae7; - --streaming-indicator: #8991bb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #550068; - --accent-2: #550068; - --accent-3: #550068; - --accent-4: #b900b1; - --accent-5: #05cb0d; - --mention: rgba(149, 90, 231, 0.1); - --mention-hover: rgba(149, 90, 231, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1e0528; - --text-1: #ffeeff; - --text-2: #ffeeff; - --text-3: #ffeeff; - --text-4: #873582; - --text-5: #320f55; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1e0528; /* Master background (Deepest) */ - --bg-3: #1a092d; /* Secondary background */ - --bg-2: #331354; /* Buttons and UI elements */ - --bg-1: #320f55; /* Active/Clicked states */ - - --hover: rgba(255, 238, 255, 0.05); - --active: rgba(255, 238, 255, 0.1); - --message-hover: rgba(255, 238, 255, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1e0528 !important; - background: #550068 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-mexico-light.css b/build/base16-mexico-light.css index 527c373..acf035c 100644 --- a/build/base16-mexico-light.css +++ b/build/base16-mexico-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #538947; - --dnd-indicator: #ab4642; - --idle-indicator: #f79a0e; - --streaming-indicator: #96609e; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7cafc2; - --accent-2: #7cafc2; - --accent-3: #7cafc2; - --accent-4: #4b8093; - --accent-5: #538947; - --mention: rgba(247, 154, 14, 0.1); - --mention-hover: rgba(247, 154, 14, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f8f8f8; - --text-1: #282828; - --text-2: #282828; - --text-3: #383838; - --text-4: #585858; - --text-5: #b8b8b8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f8f8f8; /* Master background (Deepest) */ - --bg-3: #e8e8e8; /* Secondary background */ - --bg-2: #d8d8d8; /* Buttons and UI elements */ - --bg-1: #b8b8b8; /* Active/Clicked states */ - - --hover: rgba(56, 56, 56, 0.05); - --active: rgba(56, 56, 56, 0.1); - --message-hover: rgba(56, 56, 56, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f8f8f8 !important; - background: #7cafc2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-mezcal.css b/build/base16-mezcal.css index b6e67dd..acf035c 100644 --- a/build/base16-mezcal.css +++ b/build/base16-mezcal.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a8b84a; - --dnd-indicator: #da6e54; - --idle-indicator: #d9a441; - --streaming-indicator: #c28aa8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8aa6c0; - --accent-2: #8aa6c0; - --accent-3: #8aa6c0; - --accent-4: #6fc8ae; - --accent-5: #a8b84a; - --mention: rgba(217, 164, 65, 0.1); - --mention-hover: rgba(217, 164, 65, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #13110e; - --text-1: #e9e1cf; - --text-2: #e9e1cf; - --text-3: #e0d8c8; - --text-4: #a79e8c; - --text-5: #6e6450; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #13110e; /* Master background (Deepest) */ - --bg-3: #221f14; /* Secondary background */ - --bg-2: #36301e; /* Buttons and UI elements */ - --bg-1: #6e6450; /* Active/Clicked states */ - - --hover: rgba(224, 216, 200, 0.05); - --active: rgba(224, 216, 200, 0.1); - --message-hover: rgba(224, 216, 200, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #13110e !important; - background: #8aa6c0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-mocha.css b/build/base16-mocha.css index 65329d2..acf035c 100644 --- a/build/base16-mocha.css +++ b/build/base16-mocha.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #beb55b; - --dnd-indicator: #cb6077; - --idle-indicator: #f4bc87; - --streaming-indicator: #a89bb9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8ab3b5; - --accent-2: #8ab3b5; - --accent-3: #8ab3b5; - --accent-4: #7bbda4; - --accent-5: #beb55b; - --mention: rgba(244, 188, 135, 0.1); - --mention-hover: rgba(244, 188, 135, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #3b3228; - --text-1: #e9e1dd; - --text-2: #e9e1dd; - --text-3: #d0c8c6; - --text-4: #b8afad; - --text-5: #7e705a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #3b3228; /* Master background (Deepest) */ - --bg-3: #534636; /* Secondary background */ - --bg-2: #645240; /* Buttons and UI elements */ - --bg-1: #7e705a; /* Active/Clicked states */ - - --hover: rgba(208, 200, 198, 0.05); - --active: rgba(208, 200, 198, 0.1); - --message-hover: rgba(208, 200, 198, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #3b3228 !important; - background: #8ab3b5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-monokai.css b/build/base16-monokai.css index 471f509..acf035c 100644 --- a/build/base16-monokai.css +++ b/build/base16-monokai.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a6e22e; - --dnd-indicator: #f92672; - --idle-indicator: #f4bf75; - --streaming-indicator: #ae81ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #66d9ef; - --accent-2: #66d9ef; - --accent-3: #66d9ef; - --accent-4: #a1efe4; - --accent-5: #a6e22e; - --mention: rgba(244, 191, 117, 0.1); - --mention-hover: rgba(244, 191, 117, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #272822; - --text-1: #f5f4f1; - --text-2: #f5f4f1; - --text-3: #f8f8f2; - --text-4: #a59f85; - --text-5: #75715e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #272822; /* Master background (Deepest) */ - --bg-3: #383830; /* Secondary background */ - --bg-2: #49483e; /* Buttons and UI elements */ - --bg-1: #75715e; /* Active/Clicked states */ - - --hover: rgba(248, 248, 242, 0.05); - --active: rgba(248, 248, 242, 0.1); - --message-hover: rgba(248, 248, 242, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #272822 !important; - background: #66d9ef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-moonlight.css b/build/base16-moonlight.css index e469cfb..acf035c 100644 --- a/build/base16-moonlight.css +++ b/build/base16-moonlight.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2df4c0; - --dnd-indicator: #ff5370; - --idle-indicator: #ffc777; - --streaming-indicator: #b994f1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #40ffff; - --accent-2: #40ffff; - --accent-3: #40ffff; - --accent-4: #04d1f9; - --accent-5: #2df4c0; - --mention: rgba(255, 199, 119, 0.1); - --mention-hover: rgba(255, 199, 119, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #212337; - --text-1: #b4a4f4; - --text-2: #b4a4f4; - --text-3: #a3ace1; - --text-4: #a1abe0; - --text-5: #748cd6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #212337; /* Master background (Deepest) */ - --bg-3: #403c64; /* Secondary background */ - --bg-2: #596399; /* Buttons and UI elements */ - --bg-1: #748cd6; /* Active/Clicked states */ - - --hover: rgba(163, 172, 225, 0.05); - --active: rgba(163, 172, 225, 0.1); - --message-hover: rgba(163, 172, 225, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #212337 !important; - background: #40ffff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-mountain.css b/build/base16-mountain.css index ac7c8d7..acf035c 100644 --- a/build/base16-mountain.css +++ b/build/base16-mountain.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8aac8b; - --dnd-indicator: #ac8a8c; - --idle-indicator: #aca98a; - --streaming-indicator: #ac8aac; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8f8aac; - --accent-2: #8f8aac; - --accent-3: #8f8aac; - --accent-4: #8aabac; - --accent-5: #8aac8b; - --mention: rgba(172, 169, 138, 0.1); - --mention-hover: rgba(172, 169, 138, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0f0f0f; - --text-1: #e7e7e7; - --text-2: #e7e7e7; - --text-3: #cacaca; - --text-4: #4c4c4c; - --text-5: #393939; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0f0f0f; /* Master background (Deepest) */ - --bg-3: #191919; /* Secondary background */ - --bg-2: #262626; /* Buttons and UI elements */ - --bg-1: #393939; /* Active/Clicked states */ - - --hover: rgba(202, 202, 202, 0.05); - --active: rgba(202, 202, 202, 0.1); - --message-hover: rgba(202, 202, 202, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0f0f0f !important; - background: #8f8aac !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-nebula.css b/build/base16-nebula.css index c123b10..acf035c 100644 --- a/build/base16-nebula.css +++ b/build/base16-nebula.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6562a8; - --dnd-indicator: #777abc; - --idle-indicator: #4f9062; - --streaming-indicator: #716cae; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4d6bb6; - --accent-2: #4d6bb6; - --accent-3: #4d6bb6; - --accent-4: #226f68; - --accent-5: #6562a8; - --mention: rgba(79, 144, 98, 0.1); - --mention-hover: rgba(79, 144, 98, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #22273b; - --text-1: #c7c9cd; - --text-2: #c7c9cd; - --text-3: #a4a6a9; - --text-4: #87888b; - --text-5: #6e6f72; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #22273b; /* Master background (Deepest) */ - --bg-3: #414f60; /* Secondary background */ - --bg-2: #5a8380; /* Buttons and UI elements */ - --bg-1: #6e6f72; /* Active/Clicked states */ - - --hover: rgba(164, 166, 169, 0.05); - --active: rgba(164, 166, 169, 0.1); - --message-hover: rgba(164, 166, 169, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #22273b !important; - background: #4d6bb6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-neovim-dark.css b/build/base16-neovim-dark.css index 6280b1f..acf035c 100644 --- a/build/base16-neovim-dark.css +++ b/build/base16-neovim-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b3f6c0; - --dnd-indicator: #ffc0b9; - --idle-indicator: #fce094; - --streaming-indicator: #ffcaff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #a6dbff; - --accent-2: #a6dbff; - --accent-3: #a6dbff; - --accent-4: #8cf8f7; - --accent-5: #b3f6c0; - --mention: rgba(252, 224, 148, 0.1); - --mention-hover: rgba(252, 224, 148, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #14161b; - --text-1: #eef1f8; - --text-2: #eef1f8; - --text-3: #e0e2ea; - --text-4: #c4c6cd; - --text-5: #9b9ea4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #14161b; /* Master background (Deepest) */ - --bg-3: #07080d; /* Secondary background */ - --bg-2: #4f5258; /* Buttons and UI elements */ - --bg-1: #9b9ea4; /* Active/Clicked states */ - - --hover: rgba(224, 226, 234, 0.05); - --active: rgba(224, 226, 234, 0.1); - --message-hover: rgba(224, 226, 234, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #14161b !important; - background: #a6dbff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-neovim-light.css b/build/base16-neovim-light.css index 2ef241f..acf035c 100644 --- a/build/base16-neovim-light.css +++ b/build/base16-neovim-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #005523; - --dnd-indicator: #590008; - --idle-indicator: #6b5300; - --streaming-indicator: #470045; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #004c73; - --accent-2: #004c73; - --accent-3: #004c73; - --accent-4: #007373; - --accent-5: #005523; - --mention: rgba(107, 83, 0, 0.1); - --mention-hover: rgba(107, 83, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e0e2ea; - --text-1: #07080d; - --text-2: #07080d; - --text-3: #14161b; - --text-4: #2c2e33; - --text-5: #4f5258; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e0e2ea; /* Master background (Deepest) */ - --bg-3: #eef1f8; /* Secondary background */ - --bg-2: #9b9ea4; /* Buttons and UI elements */ - --bg-1: #4f5258; /* Active/Clicked states */ - - --hover: rgba(20, 22, 27, 0.05); - --active: rgba(20, 22, 27, 0.1); - --message-hover: rgba(20, 22, 27, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e0e2ea !important; - background: #004c73 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-noche.css b/build/base16-noche.css index ffff1dd..acf035c 100644 --- a/build/base16-noche.css +++ b/build/base16-noche.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7cc596; - --dnd-indicator: #e2727e; - --idle-indicator: #d8c062; - --streaming-indicator: #b79ae0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7aa0e8; - --accent-2: #7aa0e8; - --accent-3: #7aa0e8; - --accent-4: #6dd8d0; - --accent-5: #7cc596; - --mention: rgba(216, 192, 98, 0.1); - --mention-hover: rgba(216, 192, 98, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0c0e16; - --text-1: #d9e0f3; - --text-2: #d9e0f3; - --text-3: #cbd4ec; - --text-4: #939bb2; - --text-5: #5a6178; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0c0e16; /* Master background (Deepest) */ - --bg-3: #181c2c; /* Secondary background */ - --bg-2: #232a40; /* Buttons and UI elements */ - --bg-1: #5a6178; /* Active/Clicked states */ - - --hover: rgba(203, 212, 236, 0.05); - --active: rgba(203, 212, 236, 0.1); - --message-hover: rgba(203, 212, 236, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0c0e16 !important; - background: #7aa0e8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-nord-light.css b/build/base16-nord-light.css index c78fc24..acf035c 100644 --- a/build/base16-nord-light.css +++ b/build/base16-nord-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4f894c; - --dnd-indicator: #99324b; - --idle-indicator: #9a7500; - --streaming-indicator: #97365b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3b6ea8; - --accent-2: #3b6ea8; - --accent-3: #3b6ea8; - --accent-4: #398eac; - --accent-5: #4f894c; - --mention: rgba(154, 117, 0, 0.1); - --mention-hover: rgba(154, 117, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e5e9f0; - --text-1: #3b4252; - --text-2: #3b4252; - --text-3: #2e3440; - --text-4: #60728c; - --text-5: #aebacf; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e5e9f0; /* Master background (Deepest) */ - --bg-3: #c2d0e7; /* Secondary background */ - --bg-2: #b8c5db; /* Buttons and UI elements */ - --bg-1: #aebacf; /* Active/Clicked states */ - - --hover: rgba(46, 52, 64, 0.05); - --active: rgba(46, 52, 64, 0.1); - --message-hover: rgba(46, 52, 64, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e5e9f0 !important; - background: #3b6ea8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-nord.css b/build/base16-nord.css index 714190c..acf035c 100644 --- a/build/base16-nord.css +++ b/build/base16-nord.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a3be8c; - --dnd-indicator: #bf616a; - --idle-indicator: #ebcb8b; - --streaming-indicator: #b48ead; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #81a1c1; - --accent-2: #81a1c1; - --accent-3: #81a1c1; - --accent-4: #88c0d0; - --accent-5: #a3be8c; - --mention: rgba(235, 203, 139, 0.1); - --mention-hover: rgba(235, 203, 139, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2e3440; - --text-1: #eceff4; - --text-2: #eceff4; - --text-3: #e5e9f0; - --text-4: #d8dee9; - --text-5: #4c566a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2e3440; /* Master background (Deepest) */ - --bg-3: #3b4252; /* Secondary background */ - --bg-2: #434c5e; /* Buttons and UI elements */ - --bg-1: #4c566a; /* Active/Clicked states */ - - --hover: rgba(229, 233, 240, 0.05); - --active: rgba(229, 233, 240, 0.1); - --message-hover: rgba(229, 233, 240, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2e3440 !important; - background: #81a1c1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-nova.css b/build/base16-nova.css index 1bc399f..acf035c 100644 --- a/build/base16-nova.css +++ b/build/base16-nova.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7fc1ca; - --dnd-indicator: #83afe5; - --idle-indicator: #a8ce93; - --streaming-indicator: #9a93e1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83afe5; - --accent-2: #83afe5; - --accent-3: #83afe5; - --accent-4: #f2c38f; - --accent-5: #7fc1ca; - --mention: rgba(168, 206, 147, 0.1); - --mention-hover: rgba(168, 206, 147, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #3c4c55; - --text-1: #899ba6; - --text-2: #899ba6; - --text-3: #c5d4dd; - --text-4: #899ba6; - --text-5: #899ba6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #3c4c55; /* Master background (Deepest) */ - --bg-3: #556873; /* Secondary background */ - --bg-2: #6a7d89; /* Buttons and UI elements */ - --bg-1: #899ba6; /* Active/Clicked states */ - - --hover: rgba(197, 212, 221, 0.05); - --active: rgba(197, 212, 221, 0.1); - --message-hover: rgba(197, 212, 221, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #3c4c55 !important; - background: #83afe5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ocean.css b/build/base16-ocean.css index cf45205..acf035c 100644 --- a/build/base16-ocean.css +++ b/build/base16-ocean.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a3be8c; - --dnd-indicator: #bf616a; - --idle-indicator: #ebcb8b; - --streaming-indicator: #b48ead; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8fa1b3; - --accent-2: #8fa1b3; - --accent-3: #8fa1b3; - --accent-4: #96b5b4; - --accent-5: #a3be8c; - --mention: rgba(235, 203, 139, 0.1); - --mention-hover: rgba(235, 203, 139, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2b303b; - --text-1: #dfe1e8; - --text-2: #dfe1e8; - --text-3: #c0c5ce; - --text-4: #a7adba; - --text-5: #65737e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2b303b; /* Master background (Deepest) */ - --bg-3: #343d46; /* Secondary background */ - --bg-2: #4f5b66; /* Buttons and UI elements */ - --bg-1: #65737e; /* Active/Clicked states */ - - --hover: rgba(192, 197, 206, 0.05); - --active: rgba(192, 197, 206, 0.1); - --message-hover: rgba(192, 197, 206, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2b303b !important; - background: #8fa1b3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-oceanicnext.css b/build/base16-oceanicnext.css index 9ec9f7f..acf035c 100644 --- a/build/base16-oceanicnext.css +++ b/build/base16-oceanicnext.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #99c794; - --dnd-indicator: #ec5f67; - --idle-indicator: #fac863; - --streaming-indicator: #c594c5; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6699cc; - --accent-2: #6699cc; - --accent-3: #6699cc; - --accent-4: #5fb3b3; - --accent-5: #99c794; - --mention: rgba(250, 200, 99, 0.1); - --mention-hover: rgba(250, 200, 99, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1b2b34; - --text-1: #cdd3de; - --text-2: #cdd3de; - --text-3: #c0c5ce; - --text-4: #a7adba; - --text-5: #65737e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1b2b34; /* Master background (Deepest) */ - --bg-3: #343d46; /* Secondary background */ - --bg-2: #4f5b66; /* Buttons and UI elements */ - --bg-1: #65737e; /* Active/Clicked states */ - - --hover: rgba(192, 197, 206, 0.05); - --active: rgba(192, 197, 206, 0.1); - --message-hover: rgba(192, 197, 206, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1b2b34 !important; - background: #6699cc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-ocote.css b/build/base16-ocote.css index c0e59d7..acf035c 100644 --- a/build/base16-ocote.css +++ b/build/base16-ocote.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7dc97a; - --dnd-indicator: #e8635a; - --idle-indicator: #e8b43a; - --streaming-indicator: #c58ae0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82a6e0; - --accent-2: #82a6e0; - --accent-3: #82a6e0; - --accent-4: #6dd8c8; - --accent-5: #7dc97a; - --mention: rgba(232, 180, 58, 0.1); - --mention-hover: rgba(232, 180, 58, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #14100c; - --text-1: #f1e9d9; - --text-2: #f1e9d9; - --text-3: #e7dcc6; - --text-4: #a99f8d; - --text-5: #6b6253; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #14100c; /* Master background (Deepest) */ - --bg-3: #211b13; /* Secondary background */ - --bg-2: #3a2e1c; /* Buttons and UI elements */ - --bg-1: #6b6253; /* Active/Clicked states */ - - --hover: rgba(231, 220, 198, 0.05); - --active: rgba(231, 220, 198, 0.1); - --message-hover: rgba(231, 220, 198, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #14100c !important; - background: #82a6e0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-one-light.css b/build/base16-one-light.css index a0d15c4..acf035c 100644 --- a/build/base16-one-light.css +++ b/build/base16-one-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #50a14f; - --dnd-indicator: #ca1243; - --idle-indicator: #c18401; - --streaming-indicator: #a626a4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4078f2; - --accent-2: #4078f2; - --accent-3: #4078f2; - --accent-4: #0184bc; - --accent-5: #50a14f; - --mention: rgba(193, 132, 1, 0.1); - --mention-hover: rgba(193, 132, 1, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fafafa; - --text-1: #202227; - --text-2: #202227; - --text-3: #383a42; - --text-4: #696c77; - --text-5: #a0a1a7; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fafafa; /* Master background (Deepest) */ - --bg-3: #f0f0f1; /* Secondary background */ - --bg-2: #e5e5e6; /* Buttons and UI elements */ - --bg-1: #a0a1a7; /* Active/Clicked states */ - - --hover: rgba(56, 58, 66, 0.05); - --active: rgba(56, 58, 66, 0.1); - --message-hover: rgba(56, 58, 66, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fafafa !important; - background: #4078f2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-onedark-dark.css b/build/base16-onedark-dark.css index c55dae2..acf035c 100644 --- a/build/base16-onedark-dark.css +++ b/build/base16-onedark-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #89ca78; - --dnd-indicator: #ef596f; - --idle-indicator: #e5c07b; - --streaming-indicator: #d55fde; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #61afef; - --accent-2: #61afef; - --accent-3: #61afef; - --accent-4: #2bbac5; - --accent-5: #89ca78; - --mention: rgba(229, 192, 123, 0.1); - --mention-hover: rgba(229, 192, 123, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #b6bdca; - --text-2: #b6bdca; - --text-3: #abb2bf; - --text-4: #565c64; - --text-5: #434852; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #1c1f24; /* Secondary background */ - --bg-2: #2c313a; /* Buttons and UI elements */ - --bg-1: #434852; /* Active/Clicked states */ - - --hover: rgba(171, 178, 191, 0.05); - --active: rgba(171, 178, 191, 0.1); - --message-hover: rgba(171, 178, 191, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #61afef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-onedark.css b/build/base16-onedark.css index 00d3d46..acf035c 100644 --- a/build/base16-onedark.css +++ b/build/base16-onedark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #98c379; - --dnd-indicator: #e06c75; - --idle-indicator: #e5c07b; - --streaming-indicator: #c678dd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #61afef; - --accent-2: #61afef; - --accent-3: #61afef; - --accent-4: #56b6c2; - --accent-5: #98c379; - --mention: rgba(229, 192, 123, 0.1); - --mention-hover: rgba(229, 192, 123, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282c34; - --text-1: #b6bdca; - --text-2: #b6bdca; - --text-3: #abb2bf; - --text-4: #565c64; - --text-5: #545862; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282c34; /* Master background (Deepest) */ - --bg-3: #353b45; /* Secondary background */ - --bg-2: #3e4451; /* Buttons and UI elements */ - --bg-1: #545862; /* Active/Clicked states */ - - --hover: rgba(171, 178, 191, 0.05); - --active: rgba(171, 178, 191, 0.1); - --message-hover: rgba(171, 178, 191, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282c34 !important; - background: #61afef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-outrun-dark.css b/build/base16-outrun-dark.css index 6917a43..acf035c 100644 --- a/build/base16-outrun-dark.css +++ b/build/base16-outrun-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #59f176; - --dnd-indicator: #ff4242; - --idle-indicator: #f3e877; - --streaming-indicator: #f10596; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #66b0ff; - --accent-2: #66b0ff; - --accent-3: #66b0ff; - --accent-4: #0ef0f0; - --accent-5: #59f176; - --mention: rgba(243, 232, 119, 0.1); - --mention-hover: rgba(243, 232, 119, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #00002a; - --text-1: #e0e0ff; - --text-2: #e0e0ff; - --text-3: #d0d0fa; - --text-4: #b0b0da; - --text-5: #50507a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #00002a; /* Master background (Deepest) */ - --bg-3: #20204a; /* Secondary background */ - --bg-2: #30305a; /* Buttons and UI elements */ - --bg-1: #50507a; /* Active/Clicked states */ - - --hover: rgba(208, 208, 250, 0.05); - --active: rgba(208, 208, 250, 0.1); - --message-hover: rgba(208, 208, 250, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #00002a !important; - background: #66b0ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-oxocarbon-dark.css b/build/base16-oxocarbon-dark.css index 9168a09..acf035c 100644 --- a/build/base16-oxocarbon-dark.css +++ b/build/base16-oxocarbon-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #42be65; - --dnd-indicator: #ee5396; - --idle-indicator: #ff6f00; - --streaming-indicator: #be95ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #33b1ff; - --accent-2: #33b1ff; - --accent-3: #33b1ff; - --accent-4: #3ddbd9; - --accent-5: #42be65; - --mention: rgba(255, 111, 0, 0.1); - --mention-hover: rgba(255, 111, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #161616; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #f2f4f8; - --text-4: #dde1e6; - --text-5: #525252; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #161616; /* Master background (Deepest) */ - --bg-3: #262626; /* Secondary background */ - --bg-2: #393939; /* Buttons and UI elements */ - --bg-1: #525252; /* Active/Clicked states */ - - --hover: rgba(242, 244, 248, 0.05); - --active: rgba(242, 244, 248, 0.1); - --message-hover: rgba(242, 244, 248, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #161616 !important; - background: #33b1ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-oxocarbon-light.css b/build/base16-oxocarbon-light.css index 007bd2c..acf035c 100644 --- a/build/base16-oxocarbon-light.css +++ b/build/base16-oxocarbon-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #42be65; - --dnd-indicator: #ff7eb6; - --idle-indicator: #ff6f00; - --streaming-indicator: #be95ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0f62fe; - --accent-2: #0f62fe; - --accent-3: #0f62fe; - --accent-4: #673ab7; - --accent-5: #42be65; - --mention: rgba(255, 111, 0, 0.1); - --mention-hover: rgba(255, 111, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f2f4f8; - --text-1: #3d4652; - --text-2: #3d4652; - --text-3: #525f70; - --text-4: #68788d; - --text-5: #a1acba; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f2f4f8; /* Master background (Deepest) */ - --bg-3: #dde1e6; /* Secondary background */ - --bg-2: #bec6cf; /* Buttons and UI elements */ - --bg-1: #a1acba; /* Active/Clicked states */ - - --hover: rgba(82, 95, 112, 0.05); - --active: rgba(82, 95, 112, 0.1); - --message-hover: rgba(82, 95, 112, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f2f4f8 !important; - background: #0f62fe !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pandora.css b/build/base16-pandora.css index f5159ff..acf035c 100644 --- a/build/base16-pandora.css +++ b/build/base16-pandora.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9ddf69; - --dnd-indicator: #b00b69; - --idle-indicator: #ffcc00; - --streaming-indicator: #a24030; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #008080; - --accent-2: #008080; - --accent-3: #008080; - --accent-4: #714ca6; - --accent-5: #9ddf69; - --mention: rgba(255, 204, 0, 0.1); - --mention-hover: rgba(255, 204, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #131213; - --text-1: #81506a; - --text-2: #81506a; - --text-3: #f15c99; - --text-4: #9b2a46; - --text-5: #ffbee3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #131213; /* Master background (Deepest) */ - --bg-3: #2f1823; /* Secondary background */ - --bg-2: #472234; /* Buttons and UI elements */ - --bg-1: #ffbee3; /* Active/Clicked states */ - - --hover: rgba(241, 92, 153, 0.05); - --active: rgba(241, 92, 153, 0.1); - --message-hover: rgba(241, 92, 153, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #131213 !important; - background: #008080 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-papel.css b/build/base16-papel.css index e186bef..acf035c 100644 --- a/build/base16-papel.css +++ b/build/base16-papel.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5e7a28; - --dnd-indicator: #c0392b; - --idle-indicator: #a8761a; - --streaming-indicator: #9b4d8e; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2c6ca0; - --accent-2: #2c6ca0; - --accent-3: #2c6ca0; - --accent-4: #2a8a7a; - --accent-5: #5e7a28; - --mention: rgba(168, 118, 26, 0.1); - --mention-hover: rgba(168, 118, 26, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5efe2; - --text-1: #958b7c; - --text-2: #958b7c; - --text-3: #3a2e20; - --text-4: #6a5d4b; - --text-5: #9a8c76; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5efe2; /* Master background (Deepest) */ - --bg-3: #8e8576; /* Secondary background */ - --bg-2: #e0d0ac; /* Buttons and UI elements */ - --bg-1: #9a8c76; /* Active/Clicked states */ - - --hover: rgba(58, 46, 32, 0.05); - --active: rgba(58, 46, 32, 0.1); - --message-hover: rgba(58, 46, 32, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5efe2 !important; - background: #2c6ca0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-papercolor-dark.css b/build/base16-papercolor-dark.css index 93d4664..acf035c 100644 --- a/build/base16-papercolor-dark.css +++ b/build/base16-papercolor-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5faf5f; - --dnd-indicator: #ff5faf; - --idle-indicator: #ffaf00; - --streaming-indicator: #af87d7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5fafd7; - --accent-2: #5fafd7; - --accent-3: #5fafd7; - --accent-4: #00afaf; - --accent-5: #5faf5f; - --mention: rgba(255, 175, 0, 0.1); - --mention-hover: rgba(255, 175, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1c1c; - --text-1: #b8b8b8; - --text-2: #b8b8b8; - --text-3: #9e9e9e; - --text-4: #808080; - --text-5: #585858; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1c1c; /* Master background (Deepest) */ - --bg-3: #363636; /* Secondary background */ - --bg-2: #424242; /* Buttons and UI elements */ - --bg-1: #585858; /* Active/Clicked states */ - - --hover: rgba(158, 158, 158, 0.05); - --active: rgba(158, 158, 158, 0.1); - --message-hover: rgba(158, 158, 158, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1c1c !important; - background: #5fafd7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-papercolor-light.css b/build/base16-papercolor-light.css index 4602fcf..acf035c 100644 --- a/build/base16-papercolor-light.css +++ b/build/base16-papercolor-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #008700; - --dnd-indicator: #d70000; - --idle-indicator: #d75f00; - --streaming-indicator: #8700af; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #005f87; - --accent-2: #005f87; - --accent-3: #005f87; - --accent-4: #0087af; - --accent-5: #008700; - --mention: rgba(215, 95, 0, 0.1); - --mention-hover: rgba(215, 95, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #eeeeee; - --text-1: #525252; - --text-2: #525252; - --text-3: #5e5e5e; - --text-4: #6b6b6b; - --text-5: #858585; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #eeeeee; /* Master background (Deepest) */ - --bg-3: #c4c4c4; /* Secondary background */ - --bg-2: #9e9e9e; /* Buttons and UI elements */ - --bg-1: #858585; /* Active/Clicked states */ - - --hover: rgba(94, 94, 94, 0.05); - --active: rgba(94, 94, 94, 0.1); - --message-hover: rgba(94, 94, 94, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #eeeeee !important; - background: #005f87 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-paraiso.css b/build/base16-paraiso.css index 7275e06..acf035c 100644 --- a/build/base16-paraiso.css +++ b/build/base16-paraiso.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #48b685; - --dnd-indicator: #ef6155; - --idle-indicator: #fec418; - --streaming-indicator: #815ba4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #06b6ef; - --accent-2: #06b6ef; - --accent-3: #06b6ef; - --accent-4: #5bc4bf; - --accent-5: #48b685; - --mention: rgba(254, 196, 24, 0.1); - --mention-hover: rgba(254, 196, 24, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2f1e2e; - --text-1: #b9b6b0; - --text-2: #b9b6b0; - --text-3: #a39e9b; - --text-4: #8d8687; - --text-5: #776e71; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2f1e2e; /* Master background (Deepest) */ - --bg-3: #41323f; /* Secondary background */ - --bg-2: #4f424c; /* Buttons and UI elements */ - --bg-1: #776e71; /* Active/Clicked states */ - - --hover: rgba(163, 158, 155, 0.05); - --active: rgba(163, 158, 155, 0.1); - --message-hover: rgba(163, 158, 155, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2f1e2e !important; - background: #06b6ef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pasque.css b/build/base16-pasque.css index 2052231..acf035c 100644 --- a/build/base16-pasque.css +++ b/build/base16-pasque.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c6914b; - --dnd-indicator: #a92258; - --idle-indicator: #804ead; - --streaming-indicator: #953b9d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8e7dc6; - --accent-2: #8e7dc6; - --accent-3: #8e7dc6; - --accent-4: #7263aa; - --accent-5: #c6914b; - --mention: rgba(128, 78, 173, 0.1); - --mention-hover: rgba(128, 78, 173, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #271c3a; - --text-1: #edeaef; - --text-2: #edeaef; - --text-3: #dedcdf; - --text-4: #bebcbf; - --text-5: #5d5766; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #271c3a; /* Master background (Deepest) */ - --bg-3: #100323; /* Secondary background */ - --bg-2: #3e2d5c; /* Buttons and UI elements */ - --bg-1: #5d5766; /* Active/Clicked states */ - - --hover: rgba(222, 220, 223, 0.05); - --active: rgba(222, 220, 223, 0.1); - --message-hover: rgba(222, 220, 223, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #271c3a !important; - background: #8e7dc6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pastelon-de-amarillos-dark.css b/build/base16-pastelon-de-amarillos-dark.css index c2463d9..acf035c 100644 --- a/build/base16-pastelon-de-amarillos-dark.css +++ b/build/base16-pastelon-de-amarillos-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #3ccb83; - --dnd-indicator: #ff646a; - --idle-indicator: #ffc84a; - --streaming-indicator: #d978cf; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5a9fe6; - --accent-2: #5a9fe6; - --accent-3: #5a9fe6; - --accent-4: #35c4b6; - --accent-5: #3ccb83; - --mention: rgba(255, 200, 74, 0.1); - --mention-hover: rgba(255, 200, 74, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #180d18; - --text-1: #ffebc5; - --text-2: #ffebc5; - --text-3: #ffe0a3; - --text-4: #c39a89; - --text-5: #a0747c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #180d18; /* Master background (Deepest) */ - --bg-3: #2a1424; /* Secondary background */ - --bg-2: #432031; /* Buttons and UI elements */ - --bg-1: #a0747c; /* Active/Clicked states */ - - --hover: rgba(255, 224, 163, 0.05); - --active: rgba(255, 224, 163, 0.1); - --message-hover: rgba(255, 224, 163, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #180d18 !important; - background: #5a9fe6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pastelon-de-amarillos.css b/build/base16-pastelon-de-amarillos.css index 572d842..acf035c 100644 --- a/build/base16-pastelon-de-amarillos.css +++ b/build/base16-pastelon-de-amarillos.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #167451; - --dnd-indicator: #bd3548; - --idle-indicator: #946400; - --streaming-indicator: #8d3f89; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #1e5da8; - --accent-2: #1e5da8; - --accent-3: #1e5da8; - --accent-4: #007270; - --accent-5: #167451; - --mention: rgba(148, 100, 0, 0.1); - --mention-hover: rgba(148, 100, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fff4d6; - --text-1: #2f1c2e; - --text-2: #2f1c2e; - --text-3: #432c3b; - --text-4: #684653; - --text-5: #80616b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fff4d6; /* Master background (Deepest) */ - --bg-3: #f2d083; /* Secondary background */ - --bg-2: #d69b45; /* Buttons and UI elements */ - --bg-1: #80616b; /* Active/Clicked states */ - - --hover: rgba(67, 44, 59, 0.05); - --active: rgba(67, 44, 59, 0.1); - --message-hover: rgba(67, 44, 59, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fff4d6 !important; - background: #1e5da8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-dark-contrast-plus-plus.css b/build/base16-penumbra-dark-contrast-plus-plus.css index 7e5fa11..acf035c 100644 --- a/build/base16-penumbra-dark-contrast-plus-plus.css +++ b/build/base16-penumbra-dark-contrast-plus-plus.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54c794; - --dnd-indicator: #f58c81; - --idle-indicator: #a9b852; - --streaming-indicator: #b69cf6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6eb2fd; - --accent-2: #6eb2fd; - --accent-3: #6eb2fd; - --accent-4: #00c4d7; - --accent-5: #54c794; - --mention: rgba(169, 184, 82, 0.1); - --mention-hover: rgba(169, 184, 82, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0d0f13; - --text-1: #fff7ed; - --text-2: #fff7ed; - --text-3: #dedede; - --text-4: #aeaeae; - --text-5: #636363; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0d0f13; /* Master background (Deepest) */ - --bg-3: #181b1f; /* Secondary background */ - --bg-2: #3e4044; /* Buttons and UI elements */ - --bg-1: #636363; /* Active/Clicked states */ - - --hover: rgba(222, 222, 222, 0.05); - --active: rgba(222, 222, 222, 0.1); - --message-hover: rgba(222, 222, 222, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0d0f13 !important; - background: #6eb2fd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-dark-contrast-plus.css b/build/base16-penumbra-dark-contrast-plus.css index 598acf4..acf035c 100644 --- a/build/base16-penumbra-dark-contrast-plus.css +++ b/build/base16-penumbra-dark-contrast-plus.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #50b584; - --dnd-indicator: #df7f78; - --idle-indicator: #9ca748; - --streaming-indicator: #a48fe1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #61a3e6; - --accent-2: #61a3e6; - --accent-3: #61a3e6; - --accent-4: #00b3c2; - --accent-5: #50b584; - --mention: rgba(156, 167, 72, 0.1); - --mention-hover: rgba(156, 167, 72, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181b1f; - --text-1: #fff7ed; - --text-2: #fff7ed; - --text-3: #cecece; - --text-4: #9e9e9e; - --text-5: #636363; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181b1f; /* Master background (Deepest) */ - --bg-3: #24272b; /* Secondary background */ - --bg-2: #3e4044; /* Buttons and UI elements */ - --bg-1: #636363; /* Active/Clicked states */ - - --hover: rgba(206, 206, 206, 0.05); - --active: rgba(206, 206, 206, 0.1); - --message-hover: rgba(206, 206, 206, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181b1f !important; - background: #61a3e6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-dark.css b/build/base16-penumbra-dark.css index ec45326..acf035c 100644 --- a/build/base16-penumbra-dark.css +++ b/build/base16-penumbra-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #47a477; - --dnd-indicator: #ca736c; - --idle-indicator: #8d9741; - --streaming-indicator: #9481cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5794d0; - --accent-2: #5794d0; - --accent-3: #5794d0; - --accent-4: #00a2af; - --accent-5: #47a477; - --mention: rgba(141, 151, 65, 0.1); - --mention-hover: rgba(141, 151, 65, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #24272b; - --text-1: #fff7ed; - --text-2: #fff7ed; - --text-3: #bebebe; - --text-4: #8f8f8f; - --text-5: #636363; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #24272b; /* Master background (Deepest) */ - --bg-3: #303338; /* Secondary background */ - --bg-2: #3e4044; /* Buttons and UI elements */ - --bg-1: #636363; /* Active/Clicked states */ - - --hover: rgba(190, 190, 190, 0.05); - --active: rgba(190, 190, 190, 0.1); - --message-hover: rgba(190, 190, 190, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #24272b !important; - background: #5794d0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-light-contrast-plus-plus.css b/build/base16-penumbra-light-contrast-plus-plus.css index 695e67d..acf035c 100644 --- a/build/base16-penumbra-light-contrast-plus-plus.css +++ b/build/base16-penumbra-light-contrast-plus-plus.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54c794; - --dnd-indicator: #f58c81; - --idle-indicator: #a9b852; - --streaming-indicator: #b69cf6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6eb2fd; - --accent-2: #6eb2fd; - --accent-3: #6eb2fd; - --accent-4: #00c4d7; - --accent-5: #54c794; - --mention: rgba(169, 184, 82, 0.1); - --mention-hover: rgba(169, 184, 82, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fffdfb; - --text-1: #181b1f; - --text-2: #181b1f; - --text-3: #636363; - --text-4: #aeaeae; - --text-5: #dedede; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fffdfb; /* Master background (Deepest) */ - --bg-3: #fff7ed; /* Secondary background */ - --bg-2: #f2e6d4; /* Buttons and UI elements */ - --bg-1: #dedede; /* Active/Clicked states */ - - --hover: rgba(99, 99, 99, 0.05); - --active: rgba(99, 99, 99, 0.1); - --message-hover: rgba(99, 99, 99, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fffdfb !important; - background: #6eb2fd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-light-contrast-plus.css b/build/base16-penumbra-light-contrast-plus.css index e09af40..acf035c 100644 --- a/build/base16-penumbra-light-contrast-plus.css +++ b/build/base16-penumbra-light-contrast-plus.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #50b584; - --dnd-indicator: #df7f78; - --idle-indicator: #9ca748; - --streaming-indicator: #a48fe1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #61a3e6; - --accent-2: #61a3e6; - --accent-3: #61a3e6; - --accent-4: #00b3c2; - --accent-5: #50b584; - --mention: rgba(156, 167, 72, 0.1); - --mention-hover: rgba(156, 167, 72, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fffdfb; - --text-1: #24272b; - --text-2: #24272b; - --text-3: #636363; - --text-4: #9e9e9e; - --text-5: #cecece; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fffdfb; /* Master background (Deepest) */ - --bg-3: #fff7ed; /* Secondary background */ - --bg-2: #f2e6d4; /* Buttons and UI elements */ - --bg-1: #cecece; /* Active/Clicked states */ - - --hover: rgba(99, 99, 99, 0.05); - --active: rgba(99, 99, 99, 0.1); - --message-hover: rgba(99, 99, 99, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fffdfb !important; - background: #61a3e6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-penumbra-light.css b/build/base16-penumbra-light.css index 867f946..acf035c 100644 --- a/build/base16-penumbra-light.css +++ b/build/base16-penumbra-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #47a477; - --dnd-indicator: #ca736c; - --idle-indicator: #8d9741; - --streaming-indicator: #9481cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5794d0; - --accent-2: #5794d0; - --accent-3: #5794d0; - --accent-4: #00a2af; - --accent-5: #47a477; - --mention: rgba(141, 151, 65, 0.1); - --mention-hover: rgba(141, 151, 65, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fffdfb; - --text-1: #303338; - --text-2: #303338; - --text-3: #636363; - --text-4: #8f8f8f; - --text-5: #bebebe; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fffdfb; /* Master background (Deepest) */ - --bg-3: #fff7ed; /* Secondary background */ - --bg-2: #f2e6d4; /* Buttons and UI elements */ - --bg-1: #bebebe; /* Active/Clicked states */ - - --hover: rgba(99, 99, 99, 0.05); - --active: rgba(99, 99, 99, 0.1); - --message-hover: rgba(99, 99, 99, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fffdfb !important; - background: #5794d0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-phd.css b/build/base16-phd.css index 82c4726..acf035c 100644 --- a/build/base16-phd.css +++ b/build/base16-phd.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #99bf52; - --dnd-indicator: #d07346; - --idle-indicator: #fbd461; - --streaming-indicator: #9989cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5299bf; - --accent-2: #5299bf; - --accent-3: #5299bf; - --accent-4: #72b9bf; - --accent-5: #99bf52; - --mention: rgba(251, 212, 97, 0.1); - --mention-hover: rgba(251, 212, 97, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #061229; - --text-1: #dbdde0; - --text-2: #dbdde0; - --text-3: #b8bbc2; - --text-4: #9a99a3; - --text-5: #717885; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #061229; /* Master background (Deepest) */ - --bg-3: #2a3448; /* Secondary background */ - --bg-2: #4d5666; /* Buttons and UI elements */ - --bg-1: #717885; /* Active/Clicked states */ - - --hover: rgba(184, 187, 194, 0.05); - --active: rgba(184, 187, 194, 0.1); - --message-hover: rgba(184, 187, 194, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #061229 !important; - background: #5299bf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pico.css b/build/base16-pico.css index cfe8f64..acf035c 100644 --- a/build/base16-pico.css +++ b/build/base16-pico.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00e756; - --dnd-indicator: #ff004d; - --idle-indicator: #fff024; - --streaming-indicator: #ff77a8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83769c; - --accent-2: #83769c; - --accent-3: #83769c; - --accent-4: #29adff; - --accent-5: #00e756; - --mention: rgba(255, 240, 36, 0.1); - --mention-hover: rgba(255, 240, 36, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #c2c3c7; - --text-2: #c2c3c7; - --text-3: #5f574f; - --text-4: #ab5236; - --text-5: #008751; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #1d2b53; /* Secondary background */ - --bg-2: #7e2553; /* Buttons and UI elements */ - --bg-1: #008751; /* Active/Clicked states */ - - --hover: rgba(95, 87, 79, 0.05); - --active: rgba(95, 87, 79, 0.1); - --message-hover: rgba(95, 87, 79, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #83769c !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pinky.css b/build/base16-pinky.css index 6f82141..acf035c 100644 --- a/build/base16-pinky.css +++ b/build/base16-pinky.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #ff0066; - --dnd-indicator: #ffa600; - --idle-indicator: #20df6c; - --streaming-indicator: #007fff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00ffff; - --accent-2: #00ffff; - --accent-3: #00ffff; - --accent-4: #6600ff; - --accent-5: #ff0066; - --mention: rgba(32, 223, 108, 0.1); - --mention-hover: rgba(32, 223, 108, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171517; - --text-1: #ffffff; - --text-2: #ffffff; - --text-3: #f5f5f5; - --text-4: #e7dbdb; - --text-5: #383338; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171517; /* Master background (Deepest) */ - --bg-3: #1b181b; /* Secondary background */ - --bg-2: #1d1b1d; /* Buttons and UI elements */ - --bg-1: #383338; /* Active/Clicked states */ - - --hover: rgba(245, 245, 245, 0.05); - --active: rgba(245, 245, 245, 0.1); - --message-hover: rgba(245, 245, 245, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171517 !important; - background: #00ffff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-pop.css b/build/base16-pop.css index 8d5519a..acf035c 100644 --- a/build/base16-pop.css +++ b/build/base16-pop.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #37b349; - --dnd-indicator: #eb008a; - --idle-indicator: #f8ca12; - --streaming-indicator: #b31e8d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0e5a94; - --accent-2: #0e5a94; - --accent-3: #0e5a94; - --accent-4: #00aabb; - --accent-5: #37b349; - --mention: rgba(248, 202, 18, 0.1); - --mention-hover: rgba(248, 202, 18, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #b0b0b0; - --text-5: #505050; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #505050; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #0e5a94 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-porple.css b/build/base16-porple.css index 03b1949..acf035c 100644 --- a/build/base16-porple.css +++ b/build/base16-porple.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95c76f; - --dnd-indicator: #f84547; - --idle-indicator: #efa16b; - --streaming-indicator: #b74989; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8485ce; - --accent-2: #8485ce; - --accent-3: #8485ce; - --accent-4: #64878f; - --accent-5: #95c76f; - --mention: rgba(239, 161, 107, 0.1); - --mention-hover: rgba(239, 161, 107, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292c36; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #d8d8d8; - --text-4: #b8b8b8; - --text-5: #65568a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292c36; /* Master background (Deepest) */ - --bg-3: #333344; /* Secondary background */ - --bg-2: #474160; /* Buttons and UI elements */ - --bg-1: #65568a; /* Active/Clicked states */ - - --hover: rgba(216, 216, 216, 0.05); - --active: rgba(216, 216, 216, 0.1); - --message-hover: rgba(216, 216, 216, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292c36 !important; - background: #8485ce !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-precious-dark-eleven.css b/build/base16-precious-dark-eleven.css index cefb2a6..acf035c 100644 --- a/build/base16-precious-dark-eleven.css +++ b/build/base16-precious-dark-eleven.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95b658; - --dnd-indicator: #ff8782; - --idle-indicator: #d0a543; - --streaming-indicator: #b799fe; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #68b0ee; - --accent-2: #68b0ee; - --accent-3: #68b0ee; - --accent-4: #42bda7; - --accent-5: #95b658; - --mention: rgba(208, 165, 67, 0.1); - --mention-hover: rgba(208, 165, 67, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1e20; - --text-1: #b8b7b6; - --text-2: #b8b7b6; - --text-3: #b8b7b6; - --text-4: #a8a8a7; - --text-5: #858585; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1e20; /* Master background (Deepest) */ - --bg-3: #292b2d; /* Secondary background */ - --bg-2: #37393a; /* Buttons and UI elements */ - --bg-1: #858585; /* Active/Clicked states */ - - --hover: rgba(184, 183, 182, 0.05); - --active: rgba(184, 183, 182, 0.1); - --message-hover: rgba(184, 183, 182, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1e20 !important; - background: #68b0ee !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-precious-dark-fifteen.css b/build/base16-precious-dark-fifteen.css index 293adb9..acf035c 100644 --- a/build/base16-precious-dark-fifteen.css +++ b/build/base16-precious-dark-fifteen.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95b659; - --dnd-indicator: #ff8782; - --idle-indicator: #cfa546; - --streaming-indicator: #b799ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #66b0ef; - --accent-2: #66b0ef; - --accent-3: #66b0ef; - --accent-4: #42bda7; - --accent-5: #95b659; - --mention: rgba(207, 165, 70, 0.1); - --mention-hover: rgba(207, 165, 70, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #23262b; - --text-1: #bab9b6; - --text-2: #bab9b6; - --text-3: #bab9b6; - --text-4: #abaaa8; - --text-5: #898989; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #23262b; /* Master background (Deepest) */ - --bg-3: #303337; /* Secondary background */ - --bg-2: #3e4044; /* Buttons and UI elements */ - --bg-1: #898989; /* Active/Clicked states */ - - --hover: rgba(186, 185, 182, 0.05); - --active: rgba(186, 185, 182, 0.1); - --message-hover: rgba(186, 185, 182, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #23262b !important; - background: #66b0ef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-precious-light-warm.css b/build/base16-precious-light-warm.css index f34914c..acf035c 100644 --- a/build/base16-precious-light-warm.css +++ b/build/base16-precious-light-warm.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #557300; - --dnd-indicator: #b14745; - --idle-indicator: #876500; - --streaming-indicator: #7a50c6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #246da5; - --accent-2: #246da5; - --accent-3: #246da5; - --accent-4: #0e7767; - --accent-5: #557300; - --mention: rgba(135, 101, 0, 0.1); - --mention-hover: rgba(135, 101, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fff5e5; - --text-1: #4e5359; - --text-2: #4e5359; - --text-3: #4e5359; - --text-4: #5d6065; - --text-5: #7f8080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fff5e5; /* Master background (Deepest) */ - --bg-3: #ece4d6; /* Secondary background */ - --bg-2: #d9d3c8; /* Buttons and UI elements */ - --bg-1: #7f8080; /* Active/Clicked states */ - - --hover: rgba(78, 83, 89, 0.05); - --active: rgba(78, 83, 89, 0.1); - --message-hover: rgba(78, 83, 89, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fff5e5 !important; - background: #246da5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-precious-light-white.css b/build/base16-precious-light-white.css index cc626f5..acf035c 100644 --- a/build/base16-precious-light-white.css +++ b/build/base16-precious-light-white.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #557301; - --dnd-indicator: #af4947; - --idle-indicator: #876500; - --streaming-indicator: #7b4ecb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #186daa; - --accent-2: #186daa; - --accent-3: #186daa; - --accent-4: #087767; - --accent-5: #557301; - --mention: rgba(135, 101, 0, 0.1); - --mention-hover: rgba(135, 101, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #555555; - --text-2: #555555; - --text-3: #555555; - --text-4: #636363; - --text-5: #848484; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #ededed; /* Secondary background */ - --bg-2: #dbdbdb; /* Buttons and UI elements */ - --bg-1: #848484; /* Active/Clicked states */ - - --hover: rgba(85, 85, 85, 0.05); - --active: rgba(85, 85, 85, 0.1); - --message-hover: rgba(85, 85, 85, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #186daa !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-primer-dark-dimmed.css b/build/base16-primer-dark-dimmed.css index edc2fd6..acf035c 100644 --- a/build/base16-primer-dark-dimmed.css +++ b/build/base16-primer-dark-dimmed.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #57ab5a; - --dnd-indicator: #f47067; - --idle-indicator: #c69026; - --streaming-indicator: #e275ad; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #539bf5; - --accent-2: #539bf5; - --accent-3: #539bf5; - --accent-4: #96d0ff; - --accent-5: #57ab5a; - --mention: rgba(198, 144, 38, 0.1); - --mention-hover: rgba(198, 144, 38, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c2128; - --text-1: #adbac7; - --text-2: #adbac7; - --text-3: #909dab; - --text-4: #768390; - --text-5: #545d68; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c2128; /* Master background (Deepest) */ - --bg-3: #373e47; /* Secondary background */ - --bg-2: #444c56; /* Buttons and UI elements */ - --bg-1: #545d68; /* Active/Clicked states */ - - --hover: rgba(144, 157, 171, 0.05); - --active: rgba(144, 157, 171, 0.1); - --message-hover: rgba(144, 157, 171, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c2128 !important; - background: #539bf5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-primer-dark.css b/build/base16-primer-dark.css index 12f1847..acf035c 100644 --- a/build/base16-primer-dark.css +++ b/build/base16-primer-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #3fb950; - --dnd-indicator: #ff7b72; - --idle-indicator: #d29922; - --streaming-indicator: #f778ba; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #58a6ff; - --accent-2: #58a6ff; - --accent-3: #58a6ff; - --accent-4: #a5d6ff; - --accent-5: #3fb950; - --mention: rgba(210, 153, 34, 0.1); - --mention-hover: rgba(210, 153, 34, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #010409; - --text-1: #c9d1d9; - --text-2: #c9d1d9; - --text-3: #b1bac4; - --text-4: #8b949e; - --text-5: #484f58; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #010409; /* Master background (Deepest) */ - --bg-3: #21262d; /* Secondary background */ - --bg-2: #30363d; /* Buttons and UI elements */ - --bg-1: #484f58; /* Active/Clicked states */ - - --hover: rgba(177, 186, 196, 0.05); - --active: rgba(177, 186, 196, 0.1); - --message-hover: rgba(177, 186, 196, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #010409 !important; - background: #58a6ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-primer-light.css b/build/base16-primer-light.css index d5812d5..acf035c 100644 --- a/build/base16-primer-light.css +++ b/build/base16-primer-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #28a745; - --dnd-indicator: #d73a49; - --idle-indicator: #ffd33d; - --streaming-indicator: #ea4aaa; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0366d6; - --accent-2: #0366d6; - --accent-3: #0366d6; - --accent-4: #79b8ff; - --accent-5: #28a745; - --mention: rgba(255, 211, 61, 0.1); - --mention-hover: rgba(255, 211, 61, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fafbfc; - --text-1: #24292e; - --text-2: #24292e; - --text-3: #2f363d; - --text-4: #444d56; - --text-5: #959da5; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fafbfc; /* Master background (Deepest) */ - --bg-3: #e1e4e8; /* Secondary background */ - --bg-2: #d1d5da; /* Buttons and UI elements */ - --bg-1: #959da5; /* Active/Clicked states */ - - --hover: rgba(47, 54, 61, 0.05); - --active: rgba(47, 54, 61, 0.1); - --message-hover: rgba(47, 54, 61, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fafbfc !important; - background: #0366d6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-purpledream.css b/build/base16-purpledream.css index 14a2945..acf035c 100644 --- a/build/base16-purpledream.css +++ b/build/base16-purpledream.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #14cc64; - --dnd-indicator: #ff1d0d; - --idle-indicator: #f000a0; - --streaming-indicator: #b000d0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00a0f0; - --accent-2: #00a0f0; - --accent-3: #00a0f0; - --accent-4: #0075b0; - --accent-5: #14cc64; - --mention: rgba(240, 0, 160, 0.1); - --mention-hover: rgba(240, 0, 160, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #100510; - --text-1: #eee0ee; - --text-2: #eee0ee; - --text-3: #ddd0dd; - --text-4: #bbb0bb; - --text-5: #605060; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #100510; /* Master background (Deepest) */ - --bg-3: #302030; /* Secondary background */ - --bg-2: #403040; /* Buttons and UI elements */ - --bg-1: #605060; /* Active/Clicked states */ - - --hover: rgba(221, 208, 221, 0.05); - --active: rgba(221, 208, 221, 0.1); - --message-hover: rgba(221, 208, 221, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #100510 !important; - background: #00a0f0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-qualia.css b/build/base16-qualia.css index a43aa2d..acf035c 100644 --- a/build/base16-qualia.css +++ b/build/base16-qualia.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #80c990; - --dnd-indicator: #efa6a2; - --idle-indicator: #e6a3dc; - --streaming-indicator: #e0af85; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #50cacd; - --accent-2: #50cacd; - --accent-3: #50cacd; - --accent-4: #c8c874; - --accent-5: #80c990; - --mention: rgba(230, 163, 220, 0.1); - --mention-hover: rgba(230, 163, 220, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101010; - --text-1: #c0c0c0; - --text-2: #c0c0c0; - --text-3: #c0c0c0; - --text-4: #808080; - --text-5: #454545; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101010; /* Master background (Deepest) */ - --bg-3: #454545; /* Secondary background */ - --bg-2: #454545; /* Buttons and UI elements */ - --bg-1: #454545; /* Active/Clicked states */ - - --hover: rgba(192, 192, 192, 0.05); - --active: rgba(192, 192, 192, 0.1); - --message-hover: rgba(192, 192, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101010 !important; - background: #50cacd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-railscasts.css b/build/base16-railscasts.css index 999e8b9..acf035c 100644 --- a/build/base16-railscasts.css +++ b/build/base16-railscasts.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a5c261; - --dnd-indicator: #da4939; - --idle-indicator: #ffc66d; - --streaming-indicator: #b6b3eb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6d9cbe; - --accent-2: #6d9cbe; - --accent-3: #6d9cbe; - --accent-4: #519f50; - --accent-5: #a5c261; - --mention: rgba(255, 198, 109, 0.1); - --mention-hover: rgba(255, 198, 109, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2b2b2b; - --text-1: #f4f1ed; - --text-2: #f4f1ed; - --text-3: #e6e1dc; - --text-4: #d4cfc9; - --text-5: #5a647e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2b2b2b; /* Master background (Deepest) */ - --bg-3: #272935; /* Secondary background */ - --bg-2: #3a4055; /* Buttons and UI elements */ - --bg-1: #5a647e; /* Active/Clicked states */ - - --hover: rgba(230, 225, 220, 0.05); - --active: rgba(230, 225, 220, 0.1); - --message-hover: rgba(230, 225, 220, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2b2b2b !important; - background: #6d9cbe !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-rebecca.css b/build/base16-rebecca.css index adfc3ab..acf035c 100644 --- a/build/base16-rebecca.css +++ b/build/base16-rebecca.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6dfedf; - --dnd-indicator: #a0a0c5; - --idle-indicator: #ae81ff; - --streaming-indicator: #7aa5ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2de0a7; - --accent-2: #2de0a7; - --accent-3: #2de0a7; - --accent-4: #8eaee0; - --accent-5: #6dfedf; - --mention: rgba(174, 129, 255, 0.1); - --mention-hover: rgba(174, 129, 255, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #292a44; - --text-1: #ccccff; - --text-2: #ccccff; - --text-3: #f1eff8; - --text-4: #a0a0c5; - --text-5: #666699; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #292a44; /* Master background (Deepest) */ - --bg-3: #663399; /* Secondary background */ - --bg-2: #383a62; /* Buttons and UI elements */ - --bg-1: #666699; /* Active/Clicked states */ - - --hover: rgba(241, 239, 248, 0.05); - --active: rgba(241, 239, 248, 0.1); - --message-hover: rgba(241, 239, 248, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #292a44 !important; - background: #2de0a7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-rose-pine-dawn.css b/build/base16-rose-pine-dawn.css index 4361c3a..acf035c 100644 --- a/build/base16-rose-pine-dawn.css +++ b/build/base16-rose-pine-dawn.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #286983; - --dnd-indicator: #b4637a; - --idle-indicator: #d7827e; - --streaming-indicator: #ea9d34; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #907aa9; - --accent-2: #907aa9; - --accent-3: #907aa9; - --accent-4: #56949f; - --accent-5: #286983; - --mention: rgba(215, 130, 126, 0.1); - --mention-hover: rgba(215, 130, 126, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #faf4ed; - --text-1: #575279; - --text-2: #575279; - --text-3: #575279; - --text-4: #797593; - --text-5: #9893a5; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #faf4ed; /* Master background (Deepest) */ - --bg-3: #fffaf3; /* Secondary background */ - --bg-2: #f2e9de; /* Buttons and UI elements */ - --bg-1: #9893a5; /* Active/Clicked states */ - - --hover: rgba(87, 82, 121, 0.05); - --active: rgba(87, 82, 121, 0.1); - --message-hover: rgba(87, 82, 121, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #faf4ed !important; - background: #907aa9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-rose-pine-moon.css b/build/base16-rose-pine-moon.css index 9abbfda..acf035c 100644 --- a/build/base16-rose-pine-moon.css +++ b/build/base16-rose-pine-moon.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #3e8fb0; - --dnd-indicator: #eb6f92; - --idle-indicator: #ea9a97; - --streaming-indicator: #f6c177; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #c4a7e7; - --accent-2: #c4a7e7; - --accent-3: #c4a7e7; - --accent-4: #9ccfd8; - --accent-5: #3e8fb0; - --mention: rgba(234, 154, 151, 0.1); - --mention-hover: rgba(234, 154, 151, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #232136; - --text-1: #e0def4; - --text-2: #e0def4; - --text-3: #e0def4; - --text-4: #908caa; - --text-5: #6e6a86; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #232136; /* Master background (Deepest) */ - --bg-3: #2a273f; /* Secondary background */ - --bg-2: #393552; /* Buttons and UI elements */ - --bg-1: #6e6a86; /* Active/Clicked states */ - - --hover: rgba(224, 222, 244, 0.05); - --active: rgba(224, 222, 244, 0.1); - --message-hover: rgba(224, 222, 244, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #232136 !important; - background: #c4a7e7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-rose-pine.css b/build/base16-rose-pine.css index 5965976..acf035c 100644 --- a/build/base16-rose-pine.css +++ b/build/base16-rose-pine.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #31748f; - --dnd-indicator: #eb6f92; - --idle-indicator: #ebbcba; - --streaming-indicator: #f6c177; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #c4a7e7; - --accent-2: #c4a7e7; - --accent-3: #c4a7e7; - --accent-4: #9ccfd8; - --accent-5: #31748f; - --mention: rgba(235, 188, 186, 0.1); - --mention-hover: rgba(235, 188, 186, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #191724; - --text-1: #e0def4; - --text-2: #e0def4; - --text-3: #e0def4; - --text-4: #908caa; - --text-5: #6e6a86; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #191724; /* Master background (Deepest) */ - --bg-3: #1f1d2e; /* Secondary background */ - --bg-2: #26233a; /* Buttons and UI elements */ - --bg-1: #6e6a86; /* Active/Clicked states */ - - --hover: rgba(224, 222, 244, 0.05); - --active: rgba(224, 222, 244, 0.1); - --message-hover: rgba(224, 222, 244, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #191724 !important; - background: #c4a7e7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-saga.css b/build/base16-saga.css index b0406c1..acf035c 100644 --- a/build/base16-saga.css +++ b/build/base16-saga.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #f7ddff; - --dnd-indicator: #ffd4e9; - --idle-indicator: #fbebc8; - --streaming-indicator: #dcc3f9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #c9fff7; - --accent-2: #c9fff7; - --accent-3: #c9fff7; - --accent-4: #c5edc1; - --accent-5: #f7ddff; - --mention: rgba(251, 235, 200, 0.1); - --mention-hover: rgba(251, 235, 200, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #05080a; - --text-1: #f8eae7; - --text-2: #f8eae7; - --text-3: #dce2f7; - --text-4: #192630; - --text-5: #141f27; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #05080a; /* Master background (Deepest) */ - --bg-3: #0a1014; /* Secondary background */ - --bg-2: #0f181e; /* Buttons and UI elements */ - --bg-1: #141f27; /* Active/Clicked states */ - - --hover: rgba(220, 226, 247, 0.05); - --active: rgba(220, 226, 247, 0.1); - --message-hover: rgba(220, 226, 247, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #05080a !important; - background: #c9fff7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-sagelight.css b/build/base16-sagelight.css index 0d44965..acf035c 100644 --- a/build/base16-sagelight.css +++ b/build/base16-sagelight.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a0d2c8; - --dnd-indicator: #fa8480; - --idle-indicator: #ffdc61; - --streaming-indicator: #c8a0d2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #a0a7d2; - --accent-2: #a0a7d2; - --accent-3: #a0a7d2; - --accent-4: #a2d6f5; - --accent-5: #a0d2c8; - --mention: rgba(255, 220, 97, 0.1); - --mention-hover: rgba(255, 220, 97, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f8f8f8; - --text-1: #282828; - --text-2: #282828; - --text-3: #383838; - --text-4: #585858; - --text-5: #b8b8b8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f8f8f8; /* Master background (Deepest) */ - --bg-3: #e8e8e8; /* Secondary background */ - --bg-2: #d8d8d8; /* Buttons and UI elements */ - --bg-1: #b8b8b8; /* Active/Clicked states */ - - --hover: rgba(56, 56, 56, 0.05); - --active: rgba(56, 56, 56, 0.1); - --message-hover: rgba(56, 56, 56, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f8f8f8 !important; - background: #a0a7d2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-sakura.css b/build/base16-sakura.css index 1c0f6d9..acf035c 100644 --- a/build/base16-sakura.css +++ b/build/base16-sakura.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #2e916d; - --dnd-indicator: #df2d52; - --idle-indicator: #c29461; - --streaming-indicator: #5e2180; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #006e93; - --accent-2: #006e93; - --accent-3: #006e93; - --accent-4: #1d8991; - --accent-5: #2e916d; - --mention: rgba(194, 148, 97, 0.1); - --mention-hover: rgba(194, 148, 97, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #feedf3; - --text-1: #42383a; - --text-2: #42383a; - --text-3: #564448; - --text-4: #665055; - --text-5: #755f64; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #feedf3; /* Master background (Deepest) */ - --bg-3: #f8e2e7; /* Secondary background */ - --bg-2: #e0ccd1; /* Buttons and UI elements */ - --bg-1: #755f64; /* Active/Clicked states */ - - --hover: rgba(86, 68, 72, 0.05); - --active: rgba(86, 68, 72, 0.1); - --message-hover: rgba(86, 68, 72, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #feedf3 !important; - background: #006e93 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-sandcastle.css b/build/base16-sandcastle.css index 6f05369..acf035c 100644 --- a/build/base16-sandcastle.css +++ b/build/base16-sandcastle.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #528b8b; - --dnd-indicator: #83a598; - --idle-indicator: #a07e3b; - --streaming-indicator: #d75f5f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #83a598; - --accent-2: #83a598; - --accent-3: #83a598; - --accent-4: #83a598; - --accent-5: #528b8b; - --mention: rgba(160, 126, 59, 0.1); - --mention-hover: rgba(160, 126, 59, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282c34; - --text-1: #d5c4a1; - --text-2: #d5c4a1; - --text-3: #a89984; - --text-4: #928374; - --text-5: #665c54; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282c34; /* Master background (Deepest) */ - --bg-3: #2c323b; /* Secondary background */ - --bg-2: #3e4451; /* Buttons and UI elements */ - --bg-1: #665c54; /* Active/Clicked states */ - - --hover: rgba(168, 153, 132, 0.05); - --active: rgba(168, 153, 132, 0.1); - --message-hover: rgba(168, 153, 132, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282c34 !important; - background: #83a598 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-selenized-black.css b/build/base16-selenized-black.css index e1854aa..acf035c 100644 --- a/build/base16-selenized-black.css +++ b/build/base16-selenized-black.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #70b433; - --dnd-indicator: #ed4a46; - --idle-indicator: #dbb32d; - --streaming-indicator: #a580e2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #368aeb; - --accent-2: #368aeb; - --accent-3: #368aeb; - --accent-4: #3fc5b7; - --accent-5: #70b433; - --mention: rgba(219, 179, 45, 0.1); - --mention-hover: rgba(219, 179, 45, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #181818; - --text-1: #dedede; - --text-2: #dedede; - --text-3: #b9b9b9; - --text-4: #777777; - --text-5: #777777; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #181818; /* Master background (Deepest) */ - --bg-3: #252525; /* Secondary background */ - --bg-2: #3b3b3b; /* Buttons and UI elements */ - --bg-1: #777777; /* Active/Clicked states */ - - --hover: rgba(185, 185, 185, 0.05); - --active: rgba(185, 185, 185, 0.1); - --message-hover: rgba(185, 185, 185, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #181818 !important; - background: #368aeb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-selenized-dark.css b/build/base16-selenized-dark.css index 3a2bfd9..acf035c 100644 --- a/build/base16-selenized-dark.css +++ b/build/base16-selenized-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #75b938; - --dnd-indicator: #fa5750; - --idle-indicator: #dbb32d; - --streaming-indicator: #af88eb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4695f7; - --accent-2: #4695f7; - --accent-3: #4695f7; - --accent-4: #41c7b9; - --accent-5: #75b938; - --mention: rgba(219, 179, 45, 0.1); - --mention-hover: rgba(219, 179, 45, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #103c48; - --text-1: #cad8d9; - --text-2: #cad8d9; - --text-3: #adbcbc; - --text-4: #72898f; - --text-5: #72898f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #103c48; /* Master background (Deepest) */ - --bg-3: #184956; /* Secondary background */ - --bg-2: #2d5b69; /* Buttons and UI elements */ - --bg-1: #72898f; /* Active/Clicked states */ - - --hover: rgba(173, 188, 188, 0.05); - --active: rgba(173, 188, 188, 0.1); - --message-hover: rgba(173, 188, 188, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #103c48 !important; - background: #4695f7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-selenized-light.css b/build/base16-selenized-light.css index ae6e4c9..acf035c 100644 --- a/build/base16-selenized-light.css +++ b/build/base16-selenized-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #428b00; - --dnd-indicator: #cc1729; - --idle-indicator: #a78300; - --streaming-indicator: #825dc0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #006dce; - --accent-2: #006dce; - --accent-3: #006dce; - --accent-4: #00978a; - --accent-5: #428b00; - --mention: rgba(167, 131, 0, 0.1); - --mention-hover: rgba(167, 131, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbf3db; - --text-1: #3a4d53; - --text-2: #3a4d53; - --text-3: #53676d; - --text-4: #909995; - --text-5: #909995; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbf3db; /* Master background (Deepest) */ - --bg-3: #ece3cc; /* Secondary background */ - --bg-2: #d5cdb6; /* Buttons and UI elements */ - --bg-1: #909995; /* Active/Clicked states */ - - --hover: rgba(83, 103, 109, 0.05); - --active: rgba(83, 103, 109, 0.1); - --message-hover: rgba(83, 103, 109, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbf3db !important; - background: #006dce !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-selenized-white.css b/build/base16-selenized-white.css index ca90464..acf035c 100644 --- a/build/base16-selenized-white.css +++ b/build/base16-selenized-white.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #008400; - --dnd-indicator: #bf0000; - --idle-indicator: #af8500; - --streaming-indicator: #6b40c3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0054cf; - --accent-2: #0054cf; - --accent-3: #0054cf; - --accent-4: #009a8a; - --accent-5: #008400; - --mention: rgba(175, 133, 0, 0.1); - --mention-hover: rgba(175, 133, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #282828; - --text-2: #282828; - --text-3: #474747; - --text-4: #878787; - --text-5: #878787; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #ebebeb; /* Secondary background */ - --bg-2: #cdcdcd; /* Buttons and UI elements */ - --bg-1: #878787; /* Active/Clicked states */ - - --hover: rgba(71, 71, 71, 0.05); - --active: rgba(71, 71, 71, 0.1); - --message-hover: rgba(71, 71, 71, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #0054cf !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-seti.css b/build/base16-seti.css index 48aba3b..acf035c 100644 --- a/build/base16-seti.css +++ b/build/base16-seti.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9fca56; - --dnd-indicator: #cd3f45; - --idle-indicator: #e6cd69; - --streaming-indicator: #a074c4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #55b5db; - --accent-2: #55b5db; - --accent-3: #55b5db; - --accent-4: #55dbbe; - --accent-5: #9fca56; - --mention: rgba(230, 205, 105, 0.1); - --mention-hover: rgba(230, 205, 105, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #151718; - --text-1: #eeeeee; - --text-2: #eeeeee; - --text-3: #d6d6d6; - --text-4: #43a5d5; - --text-5: #41535b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #151718; /* Master background (Deepest) */ - --bg-3: #282a2b; /* Secondary background */ - --bg-2: #3b758c; /* Buttons and UI elements */ - --bg-1: #41535b; /* Active/Clicked states */ - - --hover: rgba(214, 214, 214, 0.05); - --active: rgba(214, 214, 214, 0.1); - --message-hover: rgba(214, 214, 214, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #151718 !important; - background: #55b5db !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-shades-of-purple.css b/build/base16-shades-of-purple.css index 0d0b479..acf035c 100644 --- a/build/base16-shades-of-purple.css +++ b/build/base16-shades-of-purple.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #3ad900; - --dnd-indicator: #d90429; - --idle-indicator: #ffe700; - --streaming-indicator: #ff2c70; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6943ff; - --accent-2: #6943ff; - --accent-3: #6943ff; - --accent-4: #00c5c7; - --accent-5: #3ad900; - --mention: rgba(255, 231, 0, 0.1); - --mention-hover: rgba(255, 231, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1e1e3f; - --text-1: #ff77ff; - --text-2: #ff77ff; - --text-3: #c7c7c7; - --text-4: #6871ff; - --text-5: #808080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1e1e3f; /* Master background (Deepest) */ - --bg-3: #43d426; /* Secondary background */ - --bg-2: #f1d000; /* Buttons and UI elements */ - --bg-1: #808080; /* Active/Clicked states */ - - --hover: rgba(199, 199, 199, 0.05); - --active: rgba(199, 199, 199, 0.1); - --message-hover: rgba(199, 199, 199, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1e1e3f !important; - background: #6943ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-shadesmear-dark.css b/build/base16-shadesmear-dark.css index 0d33b8c..acf035c 100644 --- a/build/base16-shadesmear-dark.css +++ b/build/base16-shadesmear-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #71983b; - --dnd-indicator: #cc5450; - --idle-indicator: #307878; - --streaming-indicator: #d7ab54; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #376388; - --accent-2: #376388; - --accent-3: #376388; - --accent-4: #c57d42; - --accent-5: #71983b; - --mention: rgba(48, 120, 120, 0.1); - --mention-hover: rgba(48, 120, 120, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #232323; - --text-1: #e4e4e4; - --text-2: #e4e4e4; - --text-3: #dbdbdb; - --text-4: #e4e4e4; - --text-5: #c0c0c0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #232323; /* Master background (Deepest) */ - --bg-3: #1c1c1c; /* Secondary background */ - --bg-2: #4e4e4e; /* Buttons and UI elements */ - --bg-1: #c0c0c0; /* Active/Clicked states */ - - --hover: rgba(219, 219, 219, 0.05); - --active: rgba(219, 219, 219, 0.1); - --message-hover: rgba(219, 219, 219, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #232323 !important; - background: #376388 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-shadesmear-light.css b/build/base16-shadesmear-light.css index 983f759..acf035c 100644 --- a/build/base16-shadesmear-light.css +++ b/build/base16-shadesmear-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #71983b; - --dnd-indicator: #cc5450; - --idle-indicator: #307878; - --streaming-indicator: #d7ab54; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #376388; - --accent-2: #376388; - --accent-3: #376388; - --accent-4: #c57d42; - --accent-5: #71983b; - --mention: rgba(48, 120, 120, 0.1); - --mention-hover: rgba(48, 120, 120, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #dbdbdb; - --text-1: #1c1c1c; - --text-2: #1c1c1c; - --text-3: #232323; - --text-4: #1c1c1c; - --text-5: #4e4e4e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #dbdbdb; /* Master background (Deepest) */ - --bg-3: #e4e4e4; /* Secondary background */ - --bg-2: #c0c0c0; /* Buttons and UI elements */ - --bg-1: #4e4e4e; /* Active/Clicked states */ - - --hover: rgba(35, 35, 35, 0.05); - --active: rgba(35, 35, 35, 0.1); - --message-hover: rgba(35, 35, 35, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #dbdbdb !important; - background: #376388 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-shapeshifter.css b/build/base16-shapeshifter.css index 42e6549..acf035c 100644 --- a/build/base16-shapeshifter.css +++ b/build/base16-shapeshifter.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0ed839; - --dnd-indicator: #e92f2f; - --idle-indicator: #dddd13; - --streaming-indicator: #f996e2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3b48e3; - --accent-2: #3b48e3; - --accent-3: #3b48e3; - --accent-4: #23edda; - --accent-5: #0ed839; - --mention: rgba(221, 221, 19, 0.1); - --mention-hover: rgba(221, 221, 19, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f9f9f9; - --text-1: #040404; - --text-2: #040404; - --text-3: #102015; - --text-4: #343434; - --text-5: #555555; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f9f9f9; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #ababab; /* Buttons and UI elements */ - --bg-1: #555555; /* Active/Clicked states */ - - --hover: rgba(16, 32, 21, 0.05); - --active: rgba(16, 32, 21, 0.1); - --message-hover: rgba(16, 32, 21, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f9f9f9 !important; - background: #3b48e3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-silk-dark.css b/build/base16-silk-dark.css index a09c182..acf035c 100644 --- a/build/base16-silk-dark.css +++ b/build/base16-silk-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #73d8ad; - --dnd-indicator: #fb6953; - --idle-indicator: #fce380; - --streaming-indicator: #756b8a; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #46bddd; - --accent-2: #46bddd; - --accent-3: #46bddd; - --accent-4: #3fb2b9; - --accent-5: #73d8ad; - --mention: rgba(252, 227, 128, 0.1); - --mention-hover: rgba(252, 227, 128, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0e3c46; - --text-1: #cbf2f7; - --text-2: #cbf2f7; - --text-3: #c7dbdd; - --text-4: #9dc8cd; - --text-5: #587073; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0e3c46; /* Master background (Deepest) */ - --bg-3: #1d494e; /* Secondary background */ - --bg-2: #2a5054; /* Buttons and UI elements */ - --bg-1: #587073; /* Active/Clicked states */ - - --hover: rgba(199, 219, 221, 0.05); - --active: rgba(199, 219, 221, 0.1); - --message-hover: rgba(199, 219, 221, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0e3c46 !important; - background: #46bddd !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-silk-light.css b/build/base16-silk-light.css index 511c2e0..acf035c 100644 --- a/build/base16-silk-light.css +++ b/build/base16-silk-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #6ca38c; - --dnd-indicator: #cf432e; - --idle-indicator: #cfad25; - --streaming-indicator: #6e6582; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #39aac9; - --accent-2: #39aac9; - --accent-3: #39aac9; - --accent-4: #329ca2; - --accent-5: #6ca38c; - --mention: rgba(207, 173, 37, 0.1); - --mention-hover: rgba(207, 173, 37, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #e9f1ef; - --text-1: #0e3c46; - --text-2: #0e3c46; - --text-3: #385156; - --text-4: #4b5b5f; - --text-5: #5c787b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #e9f1ef; /* Master background (Deepest) */ - --bg-3: #ccd4d3; /* Secondary background */ - --bg-2: #90b7b6; /* Buttons and UI elements */ - --bg-1: #5c787b; /* Active/Clicked states */ - - --hover: rgba(56, 81, 86, 0.05); - --active: rgba(56, 81, 86, 0.1); - --message-hover: rgba(56, 81, 86, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #e9f1ef !important; - background: #39aac9 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-snazzy.css b/build/base16-snazzy.css index 2c1de08..acf035c 100644 --- a/build/base16-snazzy.css +++ b/build/base16-snazzy.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5af78e; - --dnd-indicator: #ff5c57; - --idle-indicator: #f3f99d; - --streaming-indicator: #ff6ac1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #57c7ff; - --accent-2: #57c7ff; - --accent-3: #57c7ff; - --accent-4: #9aedfe; - --accent-5: #5af78e; - --mention: rgba(243, 249, 157, 0.1); - --mention-hover: rgba(243, 249, 157, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282a36; - --text-1: #eff0eb; - --text-2: #eff0eb; - --text-3: #e2e4e5; - --text-4: #a5a5a9; - --text-5: #78787e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282a36; /* Master background (Deepest) */ - --bg-3: #34353e; /* Secondary background */ - --bg-2: #43454f; /* Buttons and UI elements */ - --bg-1: #78787e; /* Active/Clicked states */ - - --hover: rgba(226, 228, 229, 0.05); - --active: rgba(226, 228, 229, 0.1); - --message-hover: rgba(226, 228, 229, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282a36 !important; - background: #57c7ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-soft-server.css b/build/base16-soft-server.css index 71f4b50..acf035c 100644 --- a/build/base16-soft-server.css +++ b/build/base16-soft-server.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b1f2a7; - --dnd-indicator: #e965a5; - --idle-indicator: #ebde76; - --streaming-indicator: #ff79c6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #95a6f4; - --accent-2: #95a6f4; - --accent-3: #95a6f4; - --accent-4: #b3f4f3; - --accent-5: #b1f2a7; - --mention: rgba(235, 222, 118, 0.1); - --mention-hover: rgba(235, 222, 118, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #211e2a; - --text-1: #f2e8f0; - --text-2: #f2e8f0; - --text-3: #e4dee9; - --text-4: #8a829e; - --text-5: #6e6780; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #211e2a; /* Master background (Deepest) */ - --bg-3: #2c2737; /* Secondary background */ - --bg-2: #3f3951; /* Buttons and UI elements */ - --bg-1: #6e6780; /* Active/Clicked states */ - - --hover: rgba(228, 222, 233, 0.05); - --active: rgba(228, 222, 233, 0.1); - --message-hover: rgba(228, 222, 233, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #211e2a !important; - background: #95a6f4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-solarflare-light.css b/build/base16-solarflare-light.css index 717567d..acf035c 100644 --- a/build/base16-solarflare-light.css +++ b/build/base16-solarflare-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7cc844; - --dnd-indicator: #ef5253; - --idle-indicator: #e4b51c; - --streaming-indicator: #a363d5; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #33b5e1; - --accent-2: #33b5e1; - --accent-3: #33b5e1; - --accent-4: #52cbb0; - --accent-5: #7cc844; - --mention: rgba(228, 181, 28, 0.1); - --mention-hover: rgba(228, 181, 28, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f5f7fa; - --text-1: #222e38; - --text-2: #222e38; - --text-3: #586875; - --text-4: #667581; - --text-5: #85939e; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f5f7fa; /* Master background (Deepest) */ - --bg-3: #e8e9ed; /* Secondary background */ - --bg-2: #a6afb8; /* Buttons and UI elements */ - --bg-1: #85939e; /* Active/Clicked states */ - - --hover: rgba(88, 104, 117, 0.05); - --active: rgba(88, 104, 117, 0.1); - --message-hover: rgba(88, 104, 117, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f5f7fa !important; - background: #33b5e1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-solarflare.css b/build/base16-solarflare.css index 72bccec..acf035c 100644 --- a/build/base16-solarflare.css +++ b/build/base16-solarflare.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7cc844; - --dnd-indicator: #ef5253; - --idle-indicator: #e4b51c; - --streaming-indicator: #a363d5; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #33b5e1; - --accent-2: #33b5e1; - --accent-3: #33b5e1; - --accent-4: #52cbb0; - --accent-5: #7cc844; - --mention: rgba(228, 181, 28, 0.1); - --mention-hover: rgba(228, 181, 28, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #18262f; - --text-1: #e8e9ed; - --text-2: #e8e9ed; - --text-3: #a6afb8; - --text-4: #85939e; - --text-5: #667581; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #18262f; /* Master background (Deepest) */ - --bg-3: #222e38; /* Secondary background */ - --bg-2: #586875; /* Buttons and UI elements */ - --bg-1: #667581; /* Active/Clicked states */ - - --hover: rgba(166, 175, 184, 0.05); - --active: rgba(166, 175, 184, 0.1); - --message-hover: rgba(166, 175, 184, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #18262f !important; - background: #33b5e1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-solarized-dark.css b/build/base16-solarized-dark.css index 3e0d741..acf035c 100644 --- a/build/base16-solarized-dark.css +++ b/build/base16-solarized-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #859900; - --dnd-indicator: #dc322f; - --idle-indicator: #b58900; - --streaming-indicator: #6c71c4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #268bd2; - --accent-2: #268bd2; - --accent-3: #268bd2; - --accent-4: #2aa198; - --accent-5: #859900; - --mention: rgba(181, 137, 0, 0.1); - --mention-hover: rgba(181, 137, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #002b36; - --text-1: #eee8d5; - --text-2: #eee8d5; - --text-3: #93a1a1; - --text-4: #839496; - --text-5: #657b83; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #002b36; /* Master background (Deepest) */ - --bg-3: #073642; /* Secondary background */ - --bg-2: #586e75; /* Buttons and UI elements */ - --bg-1: #657b83; /* Active/Clicked states */ - - --hover: rgba(147, 161, 161, 0.05); - --active: rgba(147, 161, 161, 0.1); - --message-hover: rgba(147, 161, 161, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #002b36 !important; - background: #268bd2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-solarized-light.css b/build/base16-solarized-light.css index 531283a..acf035c 100644 --- a/build/base16-solarized-light.css +++ b/build/base16-solarized-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #859900; - --dnd-indicator: #dc322f; - --idle-indicator: #b58900; - --streaming-indicator: #6c71c4; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #268bd2; - --accent-2: #268bd2; - --accent-3: #268bd2; - --accent-4: #2aa198; - --accent-5: #859900; - --mention: rgba(181, 137, 0, 0.1); - --mention-hover: rgba(181, 137, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fdf6e3; - --text-1: #073642; - --text-2: #073642; - --text-3: #586e75; - --text-4: #657b83; - --text-5: #839496; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fdf6e3; /* Master background (Deepest) */ - --bg-3: #eee8d5; /* Secondary background */ - --bg-2: #93a1a1; /* Buttons and UI elements */ - --bg-1: #839496; /* Active/Clicked states */ - - --hover: rgba(88, 110, 117, 0.05); - --active: rgba(88, 110, 117, 0.1); - --message-hover: rgba(88, 110, 117, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fdf6e3 !important; - background: #268bd2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-spaceduck.css b/build/base16-spaceduck.css index b5d4e1a..acf035c 100644 --- a/build/base16-spaceduck.css +++ b/build/base16-spaceduck.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5ccc96; - --dnd-indicator: #e33400; - --idle-indicator: #f2ce00; - --streaming-indicator: #b3a1e6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7a5ccc; - --accent-2: #7a5ccc; - --accent-3: #7a5ccc; - --accent-4: #00a3cc; - --accent-5: #5ccc96; - --mention: rgba(242, 206, 0, 0.1); - --mention-hover: rgba(242, 206, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #16172d; - --text-1: #c1c3cc; - --text-2: #c1c3cc; - --text-3: #ecf0c1; - --text-4: #818596; - --text-5: #686f9a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #16172d; /* Master background (Deepest) */ - --bg-3: #1b1c36; /* Secondary background */ - --bg-2: #30365f; /* Buttons and UI elements */ - --bg-1: #686f9a; /* Active/Clicked states */ - - --hover: rgba(236, 240, 193, 0.05); - --active: rgba(236, 240, 193, 0.1); - --message-hover: rgba(236, 240, 193, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #16172d !important; - background: #7a5ccc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-spacemacs.css b/build/base16-spacemacs.css index 77d2e0b..acf035c 100644 --- a/build/base16-spacemacs.css +++ b/build/base16-spacemacs.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #67b11d; - --dnd-indicator: #f2241f; - --idle-indicator: #b1951d; - --streaming-indicator: #a31db1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4f97d7; - --accent-2: #4f97d7; - --accent-3: #4f97d7; - --accent-4: #2d9574; - --accent-5: #67b11d; - --mention: rgba(177, 149, 29, 0.1); - --mention-hover: rgba(177, 149, 29, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1f2022; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #a3a3a3; - --text-4: #b8b8b8; - --text-5: #585858; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1f2022; /* Master background (Deepest) */ - --bg-3: #282828; /* Secondary background */ - --bg-2: #444155; /* Buttons and UI elements */ - --bg-1: #585858; /* Active/Clicked states */ - - --hover: rgba(163, 163, 163, 0.05); - --active: rgba(163, 163, 163, 0.1); - --message-hover: rgba(163, 163, 163, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1f2022 !important; - background: #4f97d7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-sparky.css b/build/base16-sparky.css index 609e53b..acf035c 100644 --- a/build/base16-sparky.css +++ b/build/base16-sparky.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #78d64b; - --dnd-indicator: #ff585d; - --idle-indicator: #fbdd40; - --streaming-indicator: #d59ed7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4698cb; - --accent-2: #4698cb; - --accent-3: #4698cb; - --accent-4: #2dccd3; - --accent-5: #78d64b; - --mention: rgba(251, 221, 64, 0.1); - --mention-hover: rgba(251, 221, 64, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #072b31; - --text-1: #f5f5f1; - --text-2: #f5f5f1; - --text-3: #f4f5f0; - --text-4: #00778b; - --text-5: #003b49; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #072b31; /* Master background (Deepest) */ - --bg-3: #00313c; /* Secondary background */ - --bg-2: #003c46; /* Buttons and UI elements */ - --bg-1: #003b49; /* Active/Clicked states */ - - --hover: rgba(244, 245, 240, 0.05); - --active: rgba(244, 245, 240, 0.1); - --message-hover: rgba(244, 245, 240, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #072b31 !important; - background: #4698cb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-standardized-dark.css b/build/base16-standardized-dark.css index 008a320..acf035c 100644 --- a/build/base16-standardized-dark.css +++ b/build/base16-standardized-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5db129; - --dnd-indicator: #e15d67; - --idle-indicator: #e1b31a; - --streaming-indicator: #b46ee0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00a3f2; - --accent-2: #00a3f2; - --accent-3: #00a3f2; - --accent-4: #21c992; - --accent-5: #5db129; - --mention: rgba(225, 179, 26, 0.1); - --mention-hover: rgba(225, 179, 26, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #222222; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #c0c0c0; - --text-4: #898989; - --text-5: #898989; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #222222; /* Master background (Deepest) */ - --bg-3: #303030; /* Secondary background */ - --bg-2: #555555; /* Buttons and UI elements */ - --bg-1: #898989; /* Active/Clicked states */ - - --hover: rgba(192, 192, 192, 0.05); - --active: rgba(192, 192, 192, 0.1); - --message-hover: rgba(192, 192, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #222222 !important; - background: #00a3f2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-standardized-light.css b/build/base16-standardized-light.css index 68a7cd1..acf035c 100644 --- a/build/base16-standardized-light.css +++ b/build/base16-standardized-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #31861f; - --dnd-indicator: #d03e3e; - --idle-indicator: #ad8200; - --streaming-indicator: #9e57c2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3173c5; - --accent-2: #3173c5; - --accent-3: #3173c5; - --accent-4: #00998f; - --accent-5: #31861f; - --mention: rgba(173, 130, 0, 0.1); - --mention-hover: rgba(173, 130, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #333333; - --text-2: #333333; - --text-3: #444444; - --text-4: #767676; - --text-5: #767676; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #eeeeee; /* Secondary background */ - --bg-2: #cccccc; /* Buttons and UI elements */ - --bg-1: #767676; /* Active/Clicked states */ - - --hover: rgba(68, 68, 68, 0.05); - --active: rgba(68, 68, 68, 0.1); - --message-hover: rgba(68, 68, 68, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #3173c5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-stella.css b/build/base16-stella.css index 7046c9d..acf035c 100644 --- a/build/base16-stella.css +++ b/build/base16-stella.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #acc79b; - --dnd-indicator: #c79987; - --idle-indicator: #c7c691; - --streaming-indicator: #c594ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #a5aad4; - --accent-2: #a5aad4; - --accent-3: #a5aad4; - --accent-4: #9bc7bf; - --accent-5: #acc79b; - --mention: rgba(199, 198, 145, 0.1); - --mention-hover: rgba(199, 198, 145, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2b213c; - --text-1: #b4a5c8; - --text-2: #b4a5c8; - --text-3: #998bad; - --text-4: #7f7192; - --text-5: #655978; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2b213c; /* Master background (Deepest) */ - --bg-3: #362b48; /* Secondary background */ - --bg-2: #4d4160; /* Buttons and UI elements */ - --bg-1: #655978; /* Active/Clicked states */ - - --hover: rgba(153, 139, 173, 0.05); - --active: rgba(153, 139, 173, 0.1); - --message-hover: rgba(153, 139, 173, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2b213c !important; - background: #a5aad4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-still-alive.css b/build/base16-still-alive.css index 641986c..acf035c 100644 --- a/build/base16-still-alive.css +++ b/build/base16-still-alive.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #30a860; - --dnd-indicator: #d80000; - --idle-indicator: #fff018; - --streaming-indicator: #9036ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #365eff; - --accent-2: #365eff; - --accent-3: #365eff; - --accent-4: #36d3ff; - --accent-5: #30a860; - --mention: rgba(255, 240, 24, 0.1); - --mention-hover: rgba(255, 240, 24, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f0f0f0; - --text-1: #331f21; - --text-2: #331f21; - --text-3: #4c383b; - --text-4: #605758; - --text-5: #a3a3a3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f0f0f0; /* Master background (Deepest) */ - --bg-3: #d6d6d6; /* Secondary background */ - --bg-2: #bdbdbd; /* Buttons and UI elements */ - --bg-1: #a3a3a3; /* Active/Clicked states */ - - --hover: rgba(76, 56, 59, 0.05); - --active: rgba(76, 56, 59, 0.1); - --message-hover: rgba(76, 56, 59, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f0f0f0 !important; - background: #365eff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-summercamp.css b/build/base16-summercamp.css index bb8ad1a..acf035c 100644 --- a/build/base16-summercamp.css +++ b/build/base16-summercamp.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5ceb5a; - --dnd-indicator: #e35142; - --idle-indicator: #f2ff27; - --streaming-indicator: #ff8080; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #489bf0; - --accent-2: #489bf0; - --accent-3: #489bf0; - --accent-4: #5aebbc; - --accent-5: #5ceb5a; - --mention: rgba(242, 255, 39, 0.1); - --mention-hover: rgba(242, 255, 39, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1c1810; - --text-1: #bab696; - --text-2: #bab696; - --text-3: #736e55; - --text-4: #5f5b45; - --text-5: #504b38; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1c1810; /* Master background (Deepest) */ - --bg-3: #2a261c; /* Secondary background */ - --bg-2: #3a3527; /* Buttons and UI elements */ - --bg-1: #504b38; /* Active/Clicked states */ - - --hover: rgba(115, 110, 85, 0.05); - --active: rgba(115, 110, 85, 0.1); - --message-hover: rgba(115, 110, 85, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1c1810 !important; - background: #489bf0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-summerfruit-dark.css b/build/base16-summerfruit-dark.css index 9d4a6f6..acf035c 100644 --- a/build/base16-summerfruit-dark.css +++ b/build/base16-summerfruit-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00c918; - --dnd-indicator: #ff0086; - --idle-indicator: #aba800; - --streaming-indicator: #ad00a1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3777e6; - --accent-2: #3777e6; - --accent-3: #3777e6; - --accent-4: #1faaaa; - --accent-5: #00c918; - --mention: rgba(171, 168, 0, 0.1); - --mention-hover: rgba(171, 168, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #151515; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #d0d0d0; - --text-4: #b0b0b0; - --text-5: #505050; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #151515; /* Master background (Deepest) */ - --bg-3: #202020; /* Secondary background */ - --bg-2: #303030; /* Buttons and UI elements */ - --bg-1: #505050; /* Active/Clicked states */ - - --hover: rgba(208, 208, 208, 0.05); - --active: rgba(208, 208, 208, 0.1); - --message-hover: rgba(208, 208, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #151515 !important; - background: #3777e6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-summerfruit-light.css b/build/base16-summerfruit-light.css index fcb0e91..acf035c 100644 --- a/build/base16-summerfruit-light.css +++ b/build/base16-summerfruit-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00c918; - --dnd-indicator: #ff0086; - --idle-indicator: #aba800; - --streaming-indicator: #ad00a1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3777e6; - --accent-2: #3777e6; - --accent-3: #3777e6; - --accent-4: #1faaaa; - --accent-5: #00c918; - --mention: rgba(171, 168, 0, 0.1); - --mention-hover: rgba(171, 168, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #151515; - --text-2: #151515; - --text-3: #101010; - --text-4: #000000; - --text-5: #b0b0b0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #d0d0d0; /* Buttons and UI elements */ - --bg-1: #b0b0b0; /* Active/Clicked states */ - - --hover: rgba(16, 16, 16, 0.05); - --active: rgba(16, 16, 16, 0.1); - --message-hover: rgba(16, 16, 16, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #3777e6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-swamp-dark.css b/build/base16-swamp-dark.css index 23e36c7..acf035c 100644 --- a/build/base16-swamp-dark.css +++ b/build/base16-swamp-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7a7653; - --dnd-indicator: #db930d; - --idle-indicator: #a82d56; - --streaming-indicator: #91506c; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #c1666b; - --accent-2: #c1666b; - --accent-3: #c1666b; - --accent-4: #db930d; - --accent-5: #7a7653; - --mention: rgba(168, 45, 86, 0.1); - --mention-hover: rgba(168, 45, 86, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #242015; - --text-1: #ebe0bb; - --text-2: #ebe0bb; - --text-3: #d2c3a4; - --text-4: #b8a58c; - --text-5: #5f4e41; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #242015; /* Master background (Deepest) */ - --bg-3: #3a3124; /* Secondary background */ - --bg-2: #4d3f32; /* Buttons and UI elements */ - --bg-1: #5f4e41; /* Active/Clicked states */ - - --hover: rgba(210, 195, 164, 0.05); - --active: rgba(210, 195, 164, 0.1); - --message-hover: rgba(210, 195, 164, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #242015 !important; - background: #c1666b !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-swamp-light.css b/build/base16-swamp-light.css index 0aaa654..acf035c 100644 --- a/build/base16-swamp-light.css +++ b/build/base16-swamp-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #908d6a; - --dnd-indicator: #d09700; - --idle-indicator: #993333; - --streaming-indicator: #9e5581; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #bf7979; - --accent-2: #bf7979; - --accent-3: #bf7979; - --accent-4: #d09700; - --accent-5: #908d6a; - --mention: rgba(153, 51, 51, 0.1); - --mention-hover: rgba(153, 51, 51, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f1e3d1; - --text-1: #786653; - --text-2: #786653; - --text-3: #64513e; - --text-4: #a0907d; - --text-5: #b5a492; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f1e3d1; /* Master background (Deepest) */ - --bg-3: #ddcebc; /* Secondary background */ - --bg-2: #c9b9a7; /* Buttons and UI elements */ - --bg-1: #b5a492; /* Active/Clicked states */ - - --hover: rgba(100, 81, 62, 0.05); - --active: rgba(100, 81, 62, 0.1); - --message-hover: rgba(100, 81, 62, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f1e3d1 !important; - background: #bf7979 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-synth-midnight-dark.css b/build/base16-synth-midnight-dark.css index 2e48f29..acf035c 100644 --- a/build/base16-synth-midnight-dark.css +++ b/build/base16-synth-midnight-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #06ea61; - --dnd-indicator: #b53b50; - --idle-indicator: #c9d364; - --streaming-indicator: #ea5ce2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #03aeff; - --accent-2: #03aeff; - --accent-3: #03aeff; - --accent-4: #42fff9; - --accent-5: #06ea61; - --mention: rgba(201, 211, 100, 0.1); - --mention-hover: rgba(201, 211, 100, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #050608; - --text-1: #cfd1d2; - --text-2: #cfd1d2; - --text-3: #c1c3c4; - --text-4: #a3a5a6; - --text-5: #474849; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #050608; /* Master background (Deepest) */ - --bg-3: #1a1b1c; /* Secondary background */ - --bg-2: #28292a; /* Buttons and UI elements */ - --bg-1: #474849; /* Active/Clicked states */ - - --hover: rgba(193, 195, 196, 0.05); - --active: rgba(193, 195, 196, 0.1); - --message-hover: rgba(193, 195, 196, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #050608 !important; - background: #03aeff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-synth-midnight-light.css b/build/base16-synth-midnight-light.css index 24670ab..acf035c 100644 --- a/build/base16-synth-midnight-light.css +++ b/build/base16-synth-midnight-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #06ea61; - --dnd-indicator: #b53b50; - --idle-indicator: #c9d364; - --streaming-indicator: #ea5ce2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #03aeff; - --accent-2: #03aeff; - --accent-3: #03aeff; - --accent-4: #42fff9; - --accent-5: #06ea61; - --mention: rgba(201, 211, 100, 0.1); - --mention-hover: rgba(201, 211, 100, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #dddfe0; - --text-1: #1a1b1c; - --text-2: #1a1b1c; - --text-3: #28292a; - --text-4: #474849; - --text-5: #a3a5a6; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #dddfe0; /* Master background (Deepest) */ - --bg-3: #cfd1d2; /* Secondary background */ - --bg-2: #c1c3c4; /* Buttons and UI elements */ - --bg-1: #a3a5a6; /* Active/Clicked states */ - - --hover: rgba(40, 41, 42, 0.05); - --active: rgba(40, 41, 42, 0.1); - --message-hover: rgba(40, 41, 42, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #dddfe0 !important; - background: #03aeff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tango.css b/build/base16-tango.css index d22d0ca..acf035c 100644 --- a/build/base16-tango.css +++ b/build/base16-tango.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #4e9a06; - --dnd-indicator: #cc0000; - --idle-indicator: #c4a000; - --streaming-indicator: #75507b; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3465a4; - --accent-2: #3465a4; - --accent-3: #3465a4; - --accent-4: #06989a; - --accent-5: #4e9a06; - --mention: rgba(196, 160, 0, 0.1); - --mention-hover: rgba(196, 160, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2e3436; - --text-1: #ad7fa8; - --text-2: #ad7fa8; - --text-3: #d3d7cf; - --text-4: #729fcf; - --text-5: #555753; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2e3436; /* Master background (Deepest) */ - --bg-3: #8ae234; /* Secondary background */ - --bg-2: #fce94f; /* Buttons and UI elements */ - --bg-1: #555753; /* Active/Clicked states */ - - --hover: rgba(211, 215, 207, 0.05); - --active: rgba(211, 215, 207, 0.1); - --message-hover: rgba(211, 215, 207, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2e3436 !important; - background: #3465a4 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tarot.css b/build/base16-tarot.css index 6631377..acf035c 100644 --- a/build/base16-tarot.css +++ b/build/base16-tarot.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #a68e5a; - --dnd-indicator: #c53253; - --idle-indicator: #ff6565; - --streaming-indicator: #a45782; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6e6080; - --accent-2: #6e6080; - --accent-3: #6e6080; - --accent-4: #8c9785; - --accent-5: #a68e5a; - --mention: rgba(255, 101, 101, 0.1); - --mention-hover: rgba(255, 101, 101, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0e091d; - --text-1: #c4686d; - --text-2: #c4686d; - --text-3: #aa556f; - --text-4: #8c406f; - --text-5: #74316b; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0e091d; /* Master background (Deepest) */ - --bg-3: #2a153c; /* Secondary background */ - --bg-2: #4b2054; /* Buttons and UI elements */ - --bg-1: #74316b; /* Active/Clicked states */ - - --hover: rgba(170, 85, 111, 0.05); - --active: rgba(170, 85, 111, 0.1); - --message-hover: rgba(170, 85, 111, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0e091d !important; - background: #6e6080 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tender.css b/build/base16-tender.css index e13873c..acf035c 100644 --- a/build/base16-tender.css +++ b/build/base16-tender.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c9d05c; - --dnd-indicator: #f43753; - --idle-indicator: #ffc24b; - --streaming-indicator: #d3b987; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b3deef; - --accent-2: #b3deef; - --accent-3: #b3deef; - --accent-4: #73cef4; - --accent-5: #c9d05c; - --mention: rgba(255, 194, 75, 0.1); - --mention-hover: rgba(255, 194, 75, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282828; - --text-1: #e8e8e8; - --text-2: #e8e8e8; - --text-3: #eeeeee; - --text-4: #b8b8b8; - --text-5: #4c4c4c; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282828; /* Master background (Deepest) */ - --bg-3: #383838; /* Secondary background */ - --bg-2: #484848; /* Buttons and UI elements */ - --bg-1: #4c4c4c; /* Active/Clicked states */ - - --hover: rgba(238, 238, 238, 0.05); - --active: rgba(238, 238, 238, 0.1); - --message-hover: rgba(238, 238, 238, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282828 !important; - background: #b3deef !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-terracotta-dark.css b/build/base16-terracotta-dark.css index e0fa644..acf035c 100644 --- a/build/base16-terracotta-dark.css +++ b/build/base16-terracotta-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b6c68a; - --dnd-indicator: #f6998f; - --idle-indicator: #ffc37a; - --streaming-indicator: #d8a2b0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #b0a4c3; - --accent-2: #b0a4c3; - --accent-3: #b0a4c3; - --accent-4: #c0bcdb; - --accent-5: #b6c68a; - --mention: rgba(255, 195, 122, 0.1); - --mention-hover: rgba(255, 195, 122, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #241d1a; - --text-1: #cabbb5; - --text-2: #cabbb5; - --text-3: #b8a59d; - --text-4: #a78e84; - --text-5: #594740; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #241d1a; /* Master background (Deepest) */ - --bg-3: #362b27; /* Secondary background */ - --bg-2: #473933; /* Buttons and UI elements */ - --bg-1: #594740; /* Active/Clicked states */ - - --hover: rgba(184, 165, 157, 0.05); - --active: rgba(184, 165, 157, 0.1); - --message-hover: rgba(184, 165, 157, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #241d1a !important; - background: #b0a4c3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-terracotta.css b/build/base16-terracotta.css index 6bd66bb..acf035c 100644 --- a/build/base16-terracotta.css +++ b/build/base16-terracotta.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #7a894a; - --dnd-indicator: #a75045; - --idle-indicator: #ce943e; - --streaming-indicator: #8d5968; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #625574; - --accent-2: #625574; - --accent-3: #625574; - --accent-4: #847f9e; - --accent-5: #7a894a; - --mention: rgba(206, 148, 62, 0.1); - --mention-hover: rgba(206, 148, 62, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #efeae8; - --text-1: #352a25; - --text-2: #352a25; - --text-3: #473731; - --text-4: #59453d; - --text-5: #c0aca4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #efeae8; /* Master background (Deepest) */ - --bg-3: #dfd6d1; /* Secondary background */ - --bg-2: #d0c1bb; /* Buttons and UI elements */ - --bg-1: #c0aca4; /* Active/Clicked states */ - - --hover: rgba(71, 55, 49, 0.05); - --active: rgba(71, 55, 49, 0.1); - --message-hover: rgba(71, 55, 49, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #efeae8 !important; - background: #625574 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tinta.css b/build/base16-tinta.css index 3f63232..acf035c 100644 --- a/build/base16-tinta.css +++ b/build/base16-tinta.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9aa890; - --dnd-indicator: #d0726a; - --idle-indicator: #c8b86a; - --streaming-indicator: #b0a0b8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8a9ab0; - --accent-2: #8a9ab0; - --accent-3: #8a9ab0; - --accent-4: #80b8b4; - --accent-5: #9aa890; - --mention: rgba(200, 184, 106, 0.1); - --mention-hover: rgba(200, 184, 106, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101012; - --text-1: #e3e1db; - --text-2: #e3e1db; - --text-3: #d8d6d0; - --text-4: #9d9c9d; - --text-5: #62626a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101012; /* Master background (Deepest) */ - --bg-3: #202023; /* Secondary background */ - --bg-2: #2c2c30; /* Buttons and UI elements */ - --bg-1: #62626a; /* Active/Clicked states */ - - --hover: rgba(216, 214, 208, 0.05); - --active: rgba(216, 214, 208, 0.1); - --message-hover: rgba(216, 214, 208, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101012 !important; - background: #8a9ab0 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-city-dark.css b/build/base16-tokyo-city-dark.css index b9f5ce1..acf035c 100644 --- a/build/base16-tokyo-city-dark.css +++ b/build/base16-tokyo-city-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9ece6a; - --dnd-indicator: #f7768e; - --idle-indicator: #b7c5d3; - --streaming-indicator: #bb9af7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7aa2f7; - --accent-2: #7aa2f7; - --accent-3: #7aa2f7; - --accent-4: #89ddff; - --accent-5: #9ece6a; - --mention: rgba(183, 197, 211, 0.1); - --mention-hover: rgba(183, 197, 211, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171d23; - --text-1: #f6f6f8; - --text-2: #f6f6f8; - --text-3: #d8e2ec; - --text-4: #b7c5d3; - --text-5: #526270; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171d23; /* Master background (Deepest) */ - --bg-3: #1d252c; /* Secondary background */ - --bg-2: #28323a; /* Buttons and UI elements */ - --bg-1: #526270; /* Active/Clicked states */ - - --hover: rgba(216, 226, 236, 0.05); - --active: rgba(216, 226, 236, 0.1); - --message-hover: rgba(216, 226, 236, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171d23 !important; - background: #7aa2f7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-city-light.css b/build/base16-tokyo-city-light.css index 118f40f..acf035c 100644 --- a/build/base16-tokyo-city-light.css +++ b/build/base16-tokyo-city-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #485e30; - --dnd-indicator: #8c4351; - --idle-indicator: #4c505e; - --streaming-indicator: #5a4a78; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #34548a; - --accent-2: #34548a; - --accent-3: #34548a; - --accent-4: #4c505e; - --accent-5: #485e30; - --mention: rgba(76, 80, 94, 0.1); - --mention-hover: rgba(76, 80, 94, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbfbfd; - --text-1: #1d252c; - --text-2: #1d252c; - --text-3: #343b59; - --text-4: #4c505e; - --text-5: #9699a3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbfbfd; /* Master background (Deepest) */ - --bg-3: #f6f6f8; /* Secondary background */ - --bg-2: #edeff6; /* Buttons and UI elements */ - --bg-1: #9699a3; /* Active/Clicked states */ - - --hover: rgba(52, 59, 89, 0.05); - --active: rgba(52, 59, 89, 0.1); - --message-hover: rgba(52, 59, 89, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbfbfd !important; - background: #34548a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-city-terminal-dark.css b/build/base16-tokyo-city-terminal-dark.css index 18a9d13..acf035c 100644 --- a/build/base16-tokyo-city-terminal-dark.css +++ b/build/base16-tokyo-city-terminal-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8bd49c; - --dnd-indicator: #d95468; - --idle-indicator: #ebbf83; - --streaming-indicator: #b62d65; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #539afc; - --accent-2: #539afc; - --accent-3: #539afc; - --accent-4: #70e1e8; - --accent-5: #8bd49c; - --mention: rgba(235, 191, 131, 0.1); - --mention-hover: rgba(235, 191, 131, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #171d23; - --text-1: #f6f6f8; - --text-2: #f6f6f8; - --text-3: #d8e2ec; - --text-4: #b7c5d3; - --text-5: #526270; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #171d23; /* Master background (Deepest) */ - --bg-3: #1d252c; /* Secondary background */ - --bg-2: #28323a; /* Buttons and UI elements */ - --bg-1: #526270; /* Active/Clicked states */ - - --hover: rgba(216, 226, 236, 0.05); - --active: rgba(216, 226, 236, 0.1); - --message-hover: rgba(216, 226, 236, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #171d23 !important; - background: #539afc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-city-terminal-light.css b/build/base16-tokyo-city-terminal-light.css index 8dc26e6..acf035c 100644 --- a/build/base16-tokyo-city-terminal-light.css +++ b/build/base16-tokyo-city-terminal-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #33635c; - --dnd-indicator: #8c4351; - --idle-indicator: #8f5e15; - --streaming-indicator: #5a4a78; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #34548a; - --accent-2: #34548a; - --accent-3: #34548a; - --accent-4: #0f4b6e; - --accent-5: #33635c; - --mention: rgba(143, 94, 21, 0.1); - --mention-hover: rgba(143, 94, 21, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fbfbfd; - --text-1: #1d252c; - --text-2: #1d252c; - --text-3: #28323a; - --text-4: #526270; - --text-5: #b7c5d3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fbfbfd; /* Master background (Deepest) */ - --bg-3: #f6f6f8; /* Secondary background */ - --bg-2: #d8e2ec; /* Buttons and UI elements */ - --bg-1: #b7c5d3; /* Active/Clicked states */ - - --hover: rgba(40, 50, 58, 0.05); - --active: rgba(40, 50, 58, 0.1); - --message-hover: rgba(40, 50, 58, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fbfbfd !important; - background: #34548a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-dark.css b/build/base16-tokyo-night-dark.css index 26e6a05..acf035c 100644 --- a/build/base16-tokyo-night-dark.css +++ b/build/base16-tokyo-night-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9ece6a; - --dnd-indicator: #c0caf5; - --idle-indicator: #0db9d7; - --streaming-indicator: #bb9af7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2ac3de; - --accent-2: #2ac3de; - --accent-3: #2ac3de; - --accent-4: #b4f9f8; - --accent-5: #9ece6a; - --mention: rgba(13, 185, 215, 0.1); - --mention-hover: rgba(13, 185, 215, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1a1b26; - --text-1: #cbccd1; - --text-2: #cbccd1; - --text-3: #a9b1d6; - --text-4: #787c99; - --text-5: #444b6a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1a1b26; /* Master background (Deepest) */ - --bg-3: #16161e; /* Secondary background */ - --bg-2: #2f3549; /* Buttons and UI elements */ - --bg-1: #444b6a; /* Active/Clicked states */ - - --hover: rgba(169, 177, 214, 0.05); - --active: rgba(169, 177, 214, 0.1); - --message-hover: rgba(169, 177, 214, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1a1b26 !important; - background: #2ac3de !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-light.css b/build/base16-tokyo-night-light.css index f1135d3..acf035c 100644 --- a/build/base16-tokyo-night-light.css +++ b/build/base16-tokyo-night-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #485e30; - --dnd-indicator: #343b58; - --idle-indicator: #166775; - --streaming-indicator: #5a4a78; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #34548a; - --accent-2: #34548a; - --accent-3: #34548a; - --accent-4: #3e6968; - --accent-5: #485e30; - --mention: rgba(22, 103, 117, 0.1); - --mention-hover: rgba(22, 103, 117, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #d5d6db; - --text-1: #1a1b26; - --text-2: #1a1b26; - --text-3: #343b59; - --text-4: #4c505e; - --text-5: #9699a3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #d5d6db; /* Master background (Deepest) */ - --bg-3: #cbccd1; /* Secondary background */ - --bg-2: #dfe0e5; /* Buttons and UI elements */ - --bg-1: #9699a3; /* Active/Clicked states */ - - --hover: rgba(52, 59, 89, 0.05); - --active: rgba(52, 59, 89, 0.1); - --message-hover: rgba(52, 59, 89, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #d5d6db !important; - background: #34548a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-moon.css b/build/base16-tokyo-night-moon.css index add8a4f..acf035c 100644 --- a/build/base16-tokyo-night-moon.css +++ b/build/base16-tokyo-night-moon.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c3e88d; - --dnd-indicator: #ff757f; - --idle-indicator: #ffdf77; - --streaming-indicator: #fca7ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #82aaff; - --accent-2: #82aaff; - --accent-3: #82aaff; - --accent-4: #86e1fc; - --accent-5: #c3e88d; - --mention: rgba(255, 223, 119, 0.1); - --mention-hover: rgba(255, 223, 119, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #222436; - --text-1: #aeb4d1; - --text-2: #aeb4d1; - --text-3: #828bb8; - --text-4: #636da6; - --text-5: #3b4261; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #222436; /* Master background (Deepest) */ - --bg-3: #1e2030; /* Secondary background */ - --bg-2: #2d3f76; /* Buttons and UI elements */ - --bg-1: #3b4261; /* Active/Clicked states */ - - --hover: rgba(130, 139, 184, 0.05); - --active: rgba(130, 139, 184, 0.1); - --message-hover: rgba(130, 139, 184, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #222436 !important; - background: #82aaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-storm.css b/build/base16-tokyo-night-storm.css index 62b5f4c..acf035c 100644 --- a/build/base16-tokyo-night-storm.css +++ b/build/base16-tokyo-night-storm.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #9ece6a; - --dnd-indicator: #c0caf5; - --idle-indicator: #0db9d7; - --streaming-indicator: #bb9af7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #2ac3de; - --accent-2: #2ac3de; - --accent-3: #2ac3de; - --accent-4: #b4f9f8; - --accent-5: #9ece6a; - --mention: rgba(13, 185, 215, 0.1); - --mention-hover: rgba(13, 185, 215, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #24283b; - --text-1: #cbccd1; - --text-2: #cbccd1; - --text-3: #a9b1d6; - --text-4: #787c99; - --text-5: #444b6a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #24283b; /* Master background (Deepest) */ - --bg-3: #16161e; /* Secondary background */ - --bg-2: #343a52; /* Buttons and UI elements */ - --bg-1: #444b6a; /* Active/Clicked states */ - - --hover: rgba(169, 177, 214, 0.05); - --active: rgba(169, 177, 214, 0.1); - --message-hover: rgba(169, 177, 214, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #24283b !important; - background: #2ac3de !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-terminal-dark.css b/build/base16-tokyo-night-terminal-dark.css index 6c2da9c..acf035c 100644 --- a/build/base16-tokyo-night-terminal-dark.css +++ b/build/base16-tokyo-night-terminal-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #41a6b5; - --dnd-indicator: #f7768e; - --idle-indicator: #e0af68; - --streaming-indicator: #bb9af7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7aa2f7; - --accent-2: #7aa2f7; - --accent-3: #7aa2f7; - --accent-4: #7dcfff; - --accent-5: #41a6b5; - --mention: rgba(224, 175, 104, 0.1); - --mention-hover: rgba(224, 175, 104, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #16161e; - --text-1: #cbccd1; - --text-2: #cbccd1; - --text-3: #787c99; - --text-4: #787c99; - --text-5: #444b6a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #16161e; /* Master background (Deepest) */ - --bg-3: #1a1b26; /* Secondary background */ - --bg-2: #2f3549; /* Buttons and UI elements */ - --bg-1: #444b6a; /* Active/Clicked states */ - - --hover: rgba(120, 124, 153, 0.05); - --active: rgba(120, 124, 153, 0.1); - --message-hover: rgba(120, 124, 153, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #16161e !important; - background: #7aa2f7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-terminal-light.css b/build/base16-tokyo-night-terminal-light.css index 9e8a434..acf035c 100644 --- a/build/base16-tokyo-night-terminal-light.css +++ b/build/base16-tokyo-night-terminal-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #33635c; - --dnd-indicator: #8c4351; - --idle-indicator: #8f5e15; - --streaming-indicator: #5a4a78; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #34548a; - --accent-2: #34548a; - --accent-3: #34548a; - --accent-4: #0f4b6e; - --accent-5: #33635c; - --mention: rgba(143, 94, 21, 0.1); - --mention-hover: rgba(143, 94, 21, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #d5d6db; - --text-1: #1a1b26; - --text-2: #1a1b26; - --text-3: #4c505e; - --text-4: #4c505e; - --text-5: #9699a3; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #d5d6db; /* Master background (Deepest) */ - --bg-3: #cbccd1; /* Secondary background */ - --bg-2: #dfe0e5; /* Buttons and UI elements */ - --bg-1: #9699a3; /* Active/Clicked states */ - - --hover: rgba(76, 80, 94, 0.05); - --active: rgba(76, 80, 94, 0.1); - --message-hover: rgba(76, 80, 94, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #d5d6db !important; - background: #34548a !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyo-night-terminal-storm.css b/build/base16-tokyo-night-terminal-storm.css index aecfbe6..acf035c 100644 --- a/build/base16-tokyo-night-terminal-storm.css +++ b/build/base16-tokyo-night-terminal-storm.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #41a6b5; - --dnd-indicator: #f7768e; - --idle-indicator: #e0af68; - --streaming-indicator: #bb9af7; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7aa2f7; - --accent-2: #7aa2f7; - --accent-3: #7aa2f7; - --accent-4: #7dcfff; - --accent-5: #41a6b5; - --mention: rgba(224, 175, 104, 0.1); - --mention-hover: rgba(224, 175, 104, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #24283b; - --text-1: #cbccd1; - --text-2: #cbccd1; - --text-3: #787c99; - --text-4: #787c99; - --text-5: #444b6a; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #24283b; /* Master background (Deepest) */ - --bg-3: #1a1b26; /* Secondary background */ - --bg-2: #343a52; /* Buttons and UI elements */ - --bg-1: #444b6a; /* Active/Clicked states */ - - --hover: rgba(120, 124, 153, 0.05); - --active: rgba(120, 124, 153, 0.1); - --message-hover: rgba(120, 124, 153, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #24283b !important; - background: #7aa2f7 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyodark-terminal.css b/build/base16-tokyodark-terminal.css index 5ee2993..acf035c 100644 --- a/build/base16-tokyodark-terminal.css +++ b/build/base16-tokyodark-terminal.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95c561; - --dnd-indicator: #ee6d85; - --idle-indicator: #d7a65f; - --streaming-indicator: #a485dd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7199ee; - --accent-2: #7199ee; - --accent-3: #7199ee; - --accent-4: #38a89d; - --accent-5: #95c561; - --mention: rgba(215, 166, 95, 0.1); - --mention-hover: rgba(215, 166, 95, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #11121d; - --text-1: #a0a8cd; - --text-2: #a0a8cd; - --text-3: #a0a8cd; - --text-4: #4a5057; - --text-5: #282c34; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #11121d; /* Master background (Deepest) */ - --bg-3: #1a1b2a; /* Secondary background */ - --bg-2: #212234; /* Buttons and UI elements */ - --bg-1: #282c34; /* Active/Clicked states */ - - --hover: rgba(160, 168, 205, 0.05); - --active: rgba(160, 168, 205, 0.1); - --message-hover: rgba(160, 168, 205, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #11121d !important; - background: #7199ee !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tokyodark.css b/build/base16-tokyodark.css index 8a8bd65..acf035c 100644 --- a/build/base16-tokyodark.css +++ b/build/base16-tokyodark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #95c561; - --dnd-indicator: #ee6d85; - --idle-indicator: #d7a65f; - --streaming-indicator: #a485dd; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7199ee; - --accent-2: #7199ee; - --accent-3: #7199ee; - --accent-4: #9fbbf3; - --accent-5: #95c561; - --mention: rgba(215, 166, 95, 0.1); - --mention-hover: rgba(215, 166, 95, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #11121d; - --text-1: #abb2bf; - --text-2: #abb2bf; - --text-3: #a0a8cd; - --text-4: #4a5057; - --text-5: #353945; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #11121d; /* Master background (Deepest) */ - --bg-3: #212234; /* Secondary background */ - --bg-2: #212234; /* Buttons and UI elements */ - --bg-1: #353945; /* Active/Clicked states */ - - --hover: rgba(160, 168, 205, 0.05); - --active: rgba(160, 168, 205, 0.1); - --message-hover: rgba(160, 168, 205, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #11121d !important; - background: #7199ee !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tomorrow-night-eighties.css b/build/base16-tomorrow-night-eighties.css index 6908cb3..acf035c 100644 --- a/build/base16-tomorrow-night-eighties.css +++ b/build/base16-tomorrow-night-eighties.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #99cc99; - --dnd-indicator: #f2777a; - --idle-indicator: #ffcc66; - --streaming-indicator: #cc99cc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6699cc; - --accent-2: #6699cc; - --accent-3: #6699cc; - --accent-4: #66cccc; - --accent-5: #99cc99; - --mention: rgba(255, 204, 102, 0.1); - --mention-hover: rgba(255, 204, 102, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2d2d2d; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #cccccc; - --text-4: #b4b7b4; - --text-5: #999999; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2d2d2d; /* Master background (Deepest) */ - --bg-3: #393939; /* Secondary background */ - --bg-2: #515151; /* Buttons and UI elements */ - --bg-1: #999999; /* Active/Clicked states */ - - --hover: rgba(204, 204, 204, 0.05); - --active: rgba(204, 204, 204, 0.1); - --message-hover: rgba(204, 204, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2d2d2d !important; - background: #6699cc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tomorrow-night.css b/build/base16-tomorrow-night.css index 399801e..acf035c 100644 --- a/build/base16-tomorrow-night.css +++ b/build/base16-tomorrow-night.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b5bd68; - --dnd-indicator: #cc6666; - --idle-indicator: #f0c674; - --streaming-indicator: #b294bb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #81a2be; - --accent-2: #81a2be; - --accent-3: #81a2be; - --accent-4: #8abeb7; - --accent-5: #b5bd68; - --mention: rgba(240, 198, 116, 0.1); - --mention-hover: rgba(240, 198, 116, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1f21; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #c5c8c6; - --text-4: #b4b7b4; - --text-5: #969896; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1f21; /* Master background (Deepest) */ - --bg-3: #282a2e; /* Secondary background */ - --bg-2: #373b41; /* Buttons and UI elements */ - --bg-1: #969896; /* Active/Clicked states */ - - --hover: rgba(197, 200, 198, 0.05); - --active: rgba(197, 200, 198, 0.1); - --message-hover: rgba(197, 200, 198, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1f21 !important; - background: #81a2be !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tomorrow.css b/build/base16-tomorrow.css index 3595936..acf035c 100644 --- a/build/base16-tomorrow.css +++ b/build/base16-tomorrow.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #718c00; - --dnd-indicator: #c82829; - --idle-indicator: #eab700; - --streaming-indicator: #8959a8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4271ae; - --accent-2: #4271ae; - --accent-3: #4271ae; - --accent-4: #3e999f; - --accent-5: #718c00; - --mention: rgba(234, 183, 0, 0.1); - --mention-hover: rgba(234, 183, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #282a2e; - --text-2: #282a2e; - --text-3: #373b41; - --text-4: #969896; - --text-5: #b4b7b4; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #c5c8c6; /* Buttons and UI elements */ - --bg-1: #b4b7b4; /* Active/Clicked states */ - - --hover: rgba(55, 59, 65, 0.05); - --active: rgba(55, 59, 65, 0.1); - --message-hover: rgba(55, 59, 65, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #4271ae !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-tube.css b/build/base16-tube.css index b18b8a9..acf035c 100644 --- a/build/base16-tube.css +++ b/build/base16-tube.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00853e; - --dnd-indicator: #ee2e24; - --idle-indicator: #ffd204; - --streaming-indicator: #98005d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #009ddc; - --accent-2: #009ddc; - --accent-3: #009ddc; - --accent-4: #85cebc; - --accent-5: #00853e; - --mention: rgba(255, 210, 4, 0.1); - --mention-hover: rgba(255, 210, 4, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #231f20; - --text-1: #e7e7e8; - --text-2: #e7e7e8; - --text-3: #d9d8d8; - --text-4: #959ca1; - --text-5: #737171; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #231f20; /* Master background (Deepest) */ - --bg-3: #1c3f95; /* Secondary background */ - --bg-2: #5a5758; /* Buttons and UI elements */ - --bg-1: #737171; /* Active/Clicked states */ - - --hover: rgba(217, 216, 216, 0.05); - --active: rgba(217, 216, 216, 0.1); - --message-hover: rgba(217, 216, 216, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #231f20 !important; - background: #009ddc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-twilight.css b/build/base16-twilight.css index a8ee787..acf035c 100644 --- a/build/base16-twilight.css +++ b/build/base16-twilight.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #8f9d6a; - --dnd-indicator: #cf6a4c; - --idle-indicator: #f9ee98; - --streaming-indicator: #9b859d; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7587a6; - --accent-2: #7587a6; - --accent-3: #7587a6; - --accent-4: #afc4db; - --accent-5: #8f9d6a; - --mention: rgba(249, 238, 152, 0.1); - --mention-hover: rgba(249, 238, 152, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1e1e1e; - --text-1: #c3c3c3; - --text-2: #c3c3c3; - --text-3: #a7a7a7; - --text-4: #838184; - --text-5: #5f5a60; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1e1e1e; /* Master background (Deepest) */ - --bg-3: #323537; /* Secondary background */ - --bg-2: #464b50; /* Buttons and UI elements */ - --bg-1: #5f5a60; /* Active/Clicked states */ - - --hover: rgba(167, 167, 167, 0.05); - --active: rgba(167, 167, 167, 0.1); - --message-hover: rgba(167, 167, 167, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1e1e1e !important; - background: #7587a6 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-unikitty-dark.css b/build/base16-unikitty-dark.css index 3f0c102..acf035c 100644 --- a/build/base16-unikitty-dark.css +++ b/build/base16-unikitty-dark.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #17ad98; - --dnd-indicator: #d8137f; - --idle-indicator: #dc8a0e; - --streaming-indicator: #bb60ea; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #796af5; - --accent-2: #796af5; - --accent-3: #796af5; - --accent-4: #149bda; - --accent-5: #17ad98; - --mention: rgba(220, 138, 14, 0.1); - --mention-hover: rgba(220, 138, 14, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2e2a31; - --text-1: #d8d7da; - --text-2: #d8d7da; - --text-3: #bcbabe; - --text-4: #9f9da2; - --text-5: #838085; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2e2a31; /* Master background (Deepest) */ - --bg-3: #4a464d; /* Secondary background */ - --bg-2: #666369; /* Buttons and UI elements */ - --bg-1: #838085; /* Active/Clicked states */ - - --hover: rgba(188, 186, 190, 0.05); - --active: rgba(188, 186, 190, 0.1); - --message-hover: rgba(188, 186, 190, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2e2a31 !important; - background: #796af5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-unikitty-light.css b/build/base16-unikitty-light.css index 47ab34b..acf035c 100644 --- a/build/base16-unikitty-light.css +++ b/build/base16-unikitty-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #17ad98; - --dnd-indicator: #d8137f; - --idle-indicator: #dc8a0e; - --streaming-indicator: #aa17e6; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #775dff; - --accent-2: #775dff; - --accent-3: #775dff; - --accent-4: #149bda; - --accent-5: #17ad98; - --mention: rgba(220, 138, 14, 0.1); - --mention-hover: rgba(220, 138, 14, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #4f4b51; - --text-2: #4f4b51; - --text-3: #6c696e; - --text-4: #89878b; - --text-5: #a7a5a8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #e1e1e2; /* Secondary background */ - --bg-2: #c4c3c5; /* Buttons and UI elements */ - --bg-1: #a7a5a8; /* Active/Clicked states */ - - --hover: rgba(108, 105, 110, 0.05); - --active: rgba(108, 105, 110, 0.1); - --message-hover: rgba(108, 105, 110, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #775dff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-unikitty-reversible.css b/build/base16-unikitty-reversible.css index 8da3180..acf035c 100644 --- a/build/base16-unikitty-reversible.css +++ b/build/base16-unikitty-reversible.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #17ad98; - --dnd-indicator: #d8137f; - --idle-indicator: #dc8a0e; - --streaming-indicator: #b33ce8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7864fa; - --accent-2: #7864fa; - --accent-3: #7864fa; - --accent-4: #149bda; - --accent-5: #17ad98; - --mention: rgba(220, 138, 14, 0.1); - --mention-hover: rgba(220, 138, 14, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #2e2a31; - --text-1: #e1e0e1; - --text-2: #e1e0e1; - --text-3: #c3c2c4; - --text-4: #a5a3a6; - --text-5: #878589; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #2e2a31; /* Master background (Deepest) */ - --bg-3: #4b484e; /* Secondary background */ - --bg-2: #69666b; /* Buttons and UI elements */ - --bg-1: #878589; /* Active/Clicked states */ - - --hover: rgba(195, 194, 196, 0.05); - --active: rgba(195, 194, 196, 0.1); - --message-hover: rgba(195, 194, 196, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #2e2a31 !important; - background: #7864fa !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-uwunicorn.css b/build/base16-uwunicorn.css index 7dcffa1..acf035c 100644 --- a/build/base16-uwunicorn.css +++ b/build/base16-uwunicorn.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #c965bf; - --dnd-indicator: #877bb6; - --idle-indicator: #a84a73; - --streaming-indicator: #78a38f; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #6a9eb5; - --accent-2: #6a9eb5; - --accent-3: #6a9eb5; - --accent-4: #9c5fce; - --accent-5: #c965bf; - --mention: rgba(168, 74, 115, 0.1); - --mention-hover: rgba(168, 74, 115, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #241b26; - --text-1: #d9c2c6; - --text-2: #d9c2c6; - --text-3: #eed5d9; - --text-4: #7e5f83; - --text-5: #6c3cb2; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #241b26; /* Master background (Deepest) */ - --bg-3: #2f2a3f; /* Secondary background */ - --bg-2: #46354a; /* Buttons and UI elements */ - --bg-1: #6c3cb2; /* Active/Clicked states */ - - --hover: rgba(238, 213, 217, 0.05); - --active: rgba(238, 213, 217, 0.1); - --message-hover: rgba(238, 213, 217, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #241b26 !important; - background: #6a9eb5 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-valua.css b/build/base16-valua.css index df2dbc3..acf035c 100644 --- a/build/base16-valua.css +++ b/build/base16-valua.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #59d678; - --dnd-indicator: #d7586e; - --idle-indicator: #dfe754; - --streaming-indicator: #a874e0; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4ed2d2; - --accent-2: #4ed2d2; - --accent-3: #4ed2d2; - --accent-4: #76dbd2; - --accent-5: #59d678; - --mention: rgba(223, 231, 84, 0.1); - --mention-hover: rgba(223, 231, 84, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #131f1f; - --text-1: #a5cbb9; - --text-2: #a5cbb9; - --text-3: #98c1a3; - --text-4: #6d9877; - --text-5: #3e5c53; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #131f1f; /* Master background (Deepest) */ - --bg-3: #213132; /* Secondary background */ - --bg-2: #273d3c; /* Buttons and UI elements */ - --bg-1: #3e5c53; /* Active/Clicked states */ - - --hover: rgba(152, 193, 163, 0.05); - --active: rgba(152, 193, 163, 0.1); - --message-hover: rgba(152, 193, 163, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #131f1f !important; - background: #4ed2d2 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-vesper.css b/build/base16-vesper.css index 99d770b..acf035c 100644 --- a/build/base16-vesper.css +++ b/build/base16-vesper.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5f8787; - --dnd-indicator: #de6e6e; - --idle-indicator: #ffc799; - --streaming-indicator: #d69094; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #8eaaaa; - --accent-2: #8eaaaa; - --accent-3: #8eaaaa; - --accent-4: #60a592; - --accent-5: #5f8787; - --mention: rgba(255, 199, 153, 0.1); - --mention-hover: rgba(255, 199, 153, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #101010; - --text-1: #c1c1c1; - --text-2: #c1c1c1; - --text-3: #b7b7b7; - --text-4: #999999; - --text-5: #333333; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #101010; /* Master background (Deepest) */ - --bg-3: #232323; /* Secondary background */ - --bg-2: #222222; /* Buttons and UI elements */ - --bg-1: #333333; /* Active/Clicked states */ - - --hover: rgba(183, 183, 183, 0.05); - --active: rgba(183, 183, 183, 0.1); - --message-hover: rgba(183, 183, 183, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #101010 !important; - background: #8eaaaa !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-vice.css b/build/base16-vice.css index d05288a..acf035c 100644 --- a/build/base16-vice.css +++ b/build/base16-vice.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #0badff; - --dnd-indicator: #ff29a8; - --idle-indicator: #f0ffaa; - --streaming-indicator: #00f6d9; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #00eaff; - --accent-2: #00eaff; - --accent-3: #00eaff; - --accent-4: #8265ff; - --accent-5: #0badff; - --mention: rgba(240, 255, 170, 0.1); - --mention-hover: rgba(240, 255, 170, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #17191e; - --text-1: #b2bfd9; - --text-2: #b2bfd9; - --text-3: #8b9cbe; - --text-4: #555e70; - --text-5: #383a47; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #17191e; /* Master background (Deepest) */ - --bg-3: #22262d; /* Secondary background */ - --bg-2: #3c3f4c; /* Buttons and UI elements */ - --bg-1: #383a47; /* Active/Clicked states */ - - --hover: rgba(139, 156, 190, 0.05); - --active: rgba(139, 156, 190, 0.1); - --message-hover: rgba(139, 156, 190, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #17191e !important; - background: #00eaff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-vulcan.css b/build/base16-vulcan.css index 1397123..acf035c 100644 --- a/build/base16-vulcan.css +++ b/build/base16-vulcan.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #977d7c; - --dnd-indicator: #818591; - --idle-indicator: #adb4b9; - --streaming-indicator: #9198a3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #977d7c; - --accent-2: #977d7c; - --accent-3: #977d7c; - --accent-4: #977d7c; - --accent-5: #977d7c; - --mention: rgba(173, 180, 185, 0.1); - --mention-hover: rgba(173, 180, 185, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #041523; - --text-1: #333238; - --text-2: #333238; - --text-3: #5b778c; - --text-4: #6b6977; - --text-5: #7a5759; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #041523; /* Master background (Deepest) */ - --bg-3: #122339; /* Secondary background */ - --bg-2: #003552; /* Buttons and UI elements */ - --bg-1: #7a5759; /* Active/Clicked states */ - - --hover: rgba(91, 119, 140, 0.05); - --active: rgba(91, 119, 140, 0.1); - --message-hover: rgba(91, 119, 140, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #041523 !important; - background: #977d7c !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-10-light.css b/build/base16-windows-10-light.css index 0390a86..acf035c 100644 --- a/build/base16-windows-10-light.css +++ b/build/base16-windows-10-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #13a10e; - --dnd-indicator: #c50f1f; - --idle-indicator: #c19c00; - --streaming-indicator: #881798; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0037da; - --accent-2: #0037da; - --accent-3: #0037da; - --accent-4: #3a96dd; - --accent-5: #13a10e; - --mention: rgba(193, 156, 0, 0.1); - --mention-hover: rgba(193, 156, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #f2f2f2; - --text-1: #414141; - --text-2: #414141; - --text-3: #767676; - --text-4: #ababab; - --text-5: #cccccc; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #f2f2f2; /* Master background (Deepest) */ - --bg-3: #e5e5e5; /* Secondary background */ - --bg-2: #d9d9d9; /* Buttons and UI elements */ - --bg-1: #cccccc; /* Active/Clicked states */ - - --hover: rgba(118, 118, 118, 0.05); - --active: rgba(118, 118, 118, 0.1); - --message-hover: rgba(118, 118, 118, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #f2f2f2 !important; - background: #0037da !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-10.css b/build/base16-windows-10.css index 253f947..acf035c 100644 --- a/build/base16-windows-10.css +++ b/build/base16-windows-10.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #16c60c; - --dnd-indicator: #e74856; - --idle-indicator: #f9f1a5; - --streaming-indicator: #b4009e; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #3b78ff; - --accent-2: #3b78ff; - --accent-3: #3b78ff; - --accent-4: #61d6d6; - --accent-5: #16c60c; - --mention: rgba(249, 241, 165, 0.1); - --mention-hover: rgba(249, 241, 165, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #0c0c0c; - --text-1: #dfdfdf; - --text-2: #dfdfdf; - --text-3: #cccccc; - --text-4: #b9b9b9; - --text-5: #767676; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #0c0c0c; /* Master background (Deepest) */ - --bg-3: #2f2f2f; /* Secondary background */ - --bg-2: #535353; /* Buttons and UI elements */ - --bg-1: #767676; /* Active/Clicked states */ - - --hover: rgba(204, 204, 204, 0.05); - --active: rgba(204, 204, 204, 0.1); - --message-hover: rgba(204, 204, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #0c0c0c !important; - background: #3b78ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-95-light.css b/build/base16-windows-95-light.css index 6ffa582..acf035c 100644 --- a/build/base16-windows-95-light.css +++ b/build/base16-windows-95-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00a800; - --dnd-indicator: #a80000; - --idle-indicator: #a85400; - --streaming-indicator: #a800a8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0000a8; - --accent-2: #0000a8; - --accent-3: #0000a8; - --accent-4: #00a8a8; - --accent-5: #00a800; - --mention: rgba(168, 84, 0, 0.1); - --mention-hover: rgba(168, 84, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fcfcfc; - --text-1: #2a2a2a; - --text-2: #2a2a2a; - --text-3: #545454; - --text-4: #7e7e7e; - --text-5: #a8a8a8; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fcfcfc; /* Master background (Deepest) */ - --bg-3: #e0e0e0; /* Secondary background */ - --bg-2: #c4c4c4; /* Buttons and UI elements */ - --bg-1: #a8a8a8; /* Active/Clicked states */ - - --hover: rgba(84, 84, 84, 0.05); - --active: rgba(84, 84, 84, 0.1); - --message-hover: rgba(84, 84, 84, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fcfcfc !important; - background: #0000a8 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-95.css b/build/base16-windows-95.css index 9a917f6..acf035c 100644 --- a/build/base16-windows-95.css +++ b/build/base16-windows-95.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54fc54; - --dnd-indicator: #fc5454; - --idle-indicator: #fcfc54; - --streaming-indicator: #fc54fc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5454fc; - --accent-2: #5454fc; - --accent-3: #5454fc; - --accent-4: #54fcfc; - --accent-5: #54fc54; - --mention: rgba(252, 252, 84, 0.1); - --mention-hover: rgba(252, 252, 84, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #d2d2d2; - --text-2: #d2d2d2; - --text-3: #a8a8a8; - --text-4: #7e7e7e; - --text-5: #545454; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #1c1c1c; /* Secondary background */ - --bg-2: #383838; /* Buttons and UI elements */ - --bg-1: #545454; /* Active/Clicked states */ - - --hover: rgba(168, 168, 168, 0.05); - --active: rgba(168, 168, 168, 0.1); - --message-hover: rgba(168, 168, 168, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #5454fc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-highcontrast-light.css b/build/base16-windows-highcontrast-light.css index 80ce972..acf035c 100644 --- a/build/base16-windows-highcontrast-light.css +++ b/build/base16-windows-highcontrast-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #008000; - --dnd-indicator: #800000; - --idle-indicator: #808000; - --streaming-indicator: #800080; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #000080; - --accent-2: #000080; - --accent-3: #000080; - --accent-4: #008080; - --accent-5: #008000; - --mention: rgba(128, 128, 0, 0.1); - --mention-hover: rgba(128, 128, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #fcfcfc; - --text-1: #2a2a2a; - --text-2: #2a2a2a; - --text-3: #545454; - --text-4: #7e7e7e; - --text-5: #c0c0c0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #fcfcfc; /* Master background (Deepest) */ - --bg-3: #e8e8e8; /* Secondary background */ - --bg-2: #d4d4d4; /* Buttons and UI elements */ - --bg-1: #c0c0c0; /* Active/Clicked states */ - - --hover: rgba(84, 84, 84, 0.05); - --active: rgba(84, 84, 84, 0.1); - --message-hover: rgba(84, 84, 84, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #fcfcfc !important; - background: #000080 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-highcontrast.css b/build/base16-windows-highcontrast.css index 56b9f5d..acf035c 100644 --- a/build/base16-windows-highcontrast.css +++ b/build/base16-windows-highcontrast.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #54fc54; - --dnd-indicator: #fc5454; - --idle-indicator: #fcfc54; - --streaming-indicator: #fc54fc; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #5454fc; - --accent-2: #5454fc; - --accent-3: #5454fc; - --accent-4: #54fcfc; - --accent-5: #54fc54; - --mention: rgba(252, 252, 84, 0.1); - --mention-hover: rgba(252, 252, 84, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #dedede; - --text-2: #dedede; - --text-3: #c0c0c0; - --text-4: #a2a2a2; - --text-5: #545454; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #1c1c1c; /* Secondary background */ - --bg-2: #383838; /* Buttons and UI elements */ - --bg-1: #545454; /* Active/Clicked states */ - - --hover: rgba(192, 192, 192, 0.05); - --active: rgba(192, 192, 192, 0.1); - --message-hover: rgba(192, 192, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #5454fc !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-nt-light.css b/build/base16-windows-nt-light.css index 1f4627e..acf035c 100644 --- a/build/base16-windows-nt-light.css +++ b/build/base16-windows-nt-light.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #008000; - --dnd-indicator: #800000; - --idle-indicator: #808000; - --streaming-indicator: #800080; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #000080; - --accent-2: #000080; - --accent-3: #000080; - --accent-4: #008080; - --accent-5: #008000; - --mention: rgba(128, 128, 0, 0.1); - --mention-hover: rgba(128, 128, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #ffffff; - --text-1: #404040; - --text-2: #404040; - --text-3: #808080; - --text-4: #a0a0a0; - --text-5: #c0c0c0; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #ffffff; /* Master background (Deepest) */ - --bg-3: #eaeaea; /* Secondary background */ - --bg-2: #d5d5d5; /* Buttons and UI elements */ - --bg-1: #c0c0c0; /* Active/Clicked states */ - - --hover: rgba(128, 128, 128, 0.05); - --active: rgba(128, 128, 128, 0.1); - --message-hover: rgba(128, 128, 128, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #ffffff !important; - background: #000080 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-windows-nt.css b/build/base16-windows-nt.css index b223961..acf035c 100644 --- a/build/base16-windows-nt.css +++ b/build/base16-windows-nt.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #00ff00; - --dnd-indicator: #ff0000; - --idle-indicator: #ffff00; - --streaming-indicator: #ff00ff; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #0000ff; - --accent-2: #0000ff; - --accent-3: #0000ff; - --accent-4: #00ffff; - --accent-5: #00ff00; - --mention: rgba(255, 255, 0, 0.1); - --mention-hover: rgba(255, 255, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #000000; - --text-1: #e0e0e0; - --text-2: #e0e0e0; - --text-3: #c0c0c0; - --text-4: #a1a1a1; - --text-5: #808080; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #000000; /* Master background (Deepest) */ - --bg-3: #2a2a2a; /* Secondary background */ - --bg-2: #555555; /* Buttons and UI elements */ - --bg-1: #808080; /* Active/Clicked states */ - - --hover: rgba(192, 192, 192, 0.05); - --active: rgba(192, 192, 192, 0.1); - --message-hover: rgba(192, 192, 192, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #000000 !important; - background: #0000ff !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-woodland.css b/build/base16-woodland.css index c11542a..acf035c 100644 --- a/build/base16-woodland.css +++ b/build/base16-woodland.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b7ba53; - --dnd-indicator: #d35c5c; - --idle-indicator: #e0ac16; - --streaming-indicator: #bb90e2; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #88a4d3; - --accent-2: #88a4d3; - --accent-3: #88a4d3; - --accent-4: #6eb958; - --accent-5: #b7ba53; - --mention: rgba(224, 172, 22, 0.1); - --mention-hover: rgba(224, 172, 22, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #231e18; - --text-1: #d7c8bc; - --text-2: #d7c8bc; - --text-3: #cabcb1; - --text-4: #b4a490; - --text-5: #9d8b70; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #231e18; /* Master background (Deepest) */ - --bg-3: #302b25; /* Secondary background */ - --bg-2: #48413a; /* Buttons and UI elements */ - --bg-1: #9d8b70; /* Active/Clicked states */ - - --hover: rgba(202, 188, 177, 0.05); - --active: rgba(202, 188, 177, 0.1); - --message-hover: rgba(202, 188, 177, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #231e18 !important; - background: #88a4d3 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-xcode-dusk.css b/build/base16-xcode-dusk.css index d9abe18..acf035c 100644 --- a/build/base16-xcode-dusk.css +++ b/build/base16-xcode-dusk.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #df0002; - --dnd-indicator: #b21889; - --idle-indicator: #438288; - --streaming-indicator: #b21889; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #790ead; - --accent-2: #790ead; - --accent-3: #790ead; - --accent-4: #00a0be; - --accent-5: #df0002; - --mention: rgba(67, 130, 136, 0.1); - --mention-hover: rgba(67, 130, 136, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #282b35; - --text-1: #a9aaae; - --text-2: #a9aaae; - --text-3: #939599; - --text-4: #7e8086; - --text-5: #686a71; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #282b35; /* Master background (Deepest) */ - --bg-3: #3d4048; /* Secondary background */ - --bg-2: #53555d; /* Buttons and UI elements */ - --bg-1: #686a71; /* Active/Clicked states */ - - --hover: rgba(147, 149, 153, 0.05); - --active: rgba(147, 149, 153, 0.1); - --message-hover: rgba(147, 149, 153, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #282b35 !important; - background: #790ead !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-yesterday-bright.css b/build/base16-yesterday-bright.css index acc3436..acf035c 100644 --- a/build/base16-yesterday-bright.css +++ b/build/base16-yesterday-bright.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b9ca4a; - --dnd-indicator: #d54e53; - --idle-indicator: #e7c547; - --streaming-indicator: #c397d8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7aa6da; - --accent-2: #7aa6da; - --accent-3: #7aa6da; - --accent-4: #70c0b1; - --accent-5: #b9ca4a; - --mention: rgba(231, 197, 71, 0.1); - --mention-hover: rgba(231, 197, 71, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #343d46; - --text-1: #eff1f5; - --text-2: #eff1f5; - --text-3: #dfe1e8; - --text-4: #c0c5ce; - --text-5: #a7adba; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #343d46; /* Master background (Deepest) */ - --bg-3: #4f5b66; /* Secondary background */ - --bg-2: #65737e; /* Buttons and UI elements */ - --bg-1: #a7adba; /* Active/Clicked states */ - - --hover: rgba(223, 225, 232, 0.05); - --active: rgba(223, 225, 232, 0.1); - --message-hover: rgba(223, 225, 232, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #343d46 !important; - background: #7aa6da !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-yesterday-night.css b/build/base16-yesterday-night.css index 5955fb0..acf035c 100644 --- a/build/base16-yesterday-night.css +++ b/build/base16-yesterday-night.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #b5bd68; - --dnd-indicator: #cc6666; - --idle-indicator: #f0c674; - --streaming-indicator: #b294bb; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #81a2be; - --accent-2: #81a2be; - --accent-3: #81a2be; - --accent-4: #8abeb7; - --accent-5: #b5bd68; - --mention: rgba(240, 198, 116, 0.1); - --mention-hover: rgba(240, 198, 116, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #343d46; - --text-1: #eff1f5; - --text-2: #eff1f5; - --text-3: #dfe1e8; - --text-4: #c0c5ce; - --text-5: #a7adba; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #343d46; /* Master background (Deepest) */ - --bg-3: #4f5b66; /* Secondary background */ - --bg-2: #65737e; /* Buttons and UI elements */ - --bg-1: #a7adba; /* Active/Clicked states */ - - --hover: rgba(223, 225, 232, 0.05); - --active: rgba(223, 225, 232, 0.1); - --message-hover: rgba(223, 225, 232, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #343d46 !important; - background: #81a2be !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-yesterday.css b/build/base16-yesterday.css index 68109dd..acf035c 100644 --- a/build/base16-yesterday.css +++ b/build/base16-yesterday.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #718c00; - --dnd-indicator: #c82829; - --idle-indicator: #eab700; - --streaming-indicator: #8959a8; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #4271ae; - --accent-2: #4271ae; - --accent-3: #4271ae; - --accent-4: #3e999f; - --accent-5: #718c00; - --mention: rgba(234, 183, 0, 0.1); - --mention-hover: rgba(234, 183, 0, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #1d1f21; - --text-1: #efefef; - --text-2: #efefef; - --text-3: #d6d6d6; - --text-4: #8e908c; - --text-5: #969896; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #1d1f21; /* Master background (Deepest) */ - --bg-3: #282a2e; /* Secondary background */ - --bg-2: #4d4d4c; /* Buttons and UI elements */ - --bg-1: #969896; /* Active/Clicked states */ - - --hover: rgba(214, 214, 214, 0.05); - --active: rgba(214, 214, 214, 0.1); - --message-hover: rgba(214, 214, 214, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #1d1f21 !important; - background: #4271ae !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-zenbones.css b/build/base16-zenbones.css index 6ba00ee..acf035c 100644 --- a/build/base16-zenbones.css +++ b/build/base16-zenbones.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #d68c67; - --dnd-indicator: #3d3839; - --idle-indicator: #8bae68; - --streaming-indicator: #65b8c1; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #cf86c1; - --accent-2: #cf86c1; - --accent-3: #cf86c1; - --accent-4: #61abda; - --accent-5: #d68c67; - --mention: rgba(139, 174, 104, 0.1); - --mention-hover: rgba(139, 174, 104, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #191919; - --text-1: #66a5ad; - --text-2: #66a5ad; - --text-3: #b279a7; - --text-4: #6099c0; - --text-5: #b77e64; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #191919; /* Master background (Deepest) */ - --bg-3: #de6e7c; /* Secondary background */ - --bg-2: #819b69; /* Buttons and UI elements */ - --bg-1: #b77e64; /* Active/Clicked states */ - - --hover: rgba(178, 121, 167, 0.05); - --active: rgba(178, 121, 167, 0.1); - --message-hover: rgba(178, 121, 167, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #191919 !important; - background: #cf86c1 !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/build/base16-zenburn.css b/build/base16-zenburn.css index 0916e68..acf035c 100644 --- a/build/base16-zenburn.css +++ b/build/base16-zenburn.css @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #5f7f5f; - --dnd-indicator: #dca3a3; - --idle-indicator: #e0cf9f; - --streaming-indicator: #dc8cc3; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #7cb8bb; - --accent-2: #7cb8bb; - --accent-3: #7cb8bb; - --accent-4: #93e0e3; - --accent-5: #5f7f5f; - --mention: rgba(224, 207, 159, 0.1); - --mention-hover: rgba(224, 207, 159, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #383838; - --text-1: #c0c0c0; - --text-2: #c0c0c0; - --text-3: #dcdccc; - --text-4: #808080; - --text-5: #6f6f6f; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #383838; /* Master background (Deepest) */ - --bg-3: #404040; /* Secondary background */ - --bg-2: #606060; /* Buttons and UI elements */ - --bg-1: #6f6f6f; /* Active/Clicked states */ - - --hover: rgba(220, 220, 204, 0.05); - --active: rgba(220, 220, 204, 0.1); - --message-hover: rgba(220, 220, 204, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #383838 !important; - background: #7cb8bb !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + } diff --git a/templates/default.mustache b/templates/default.mustache index 164387c..acf035c 100644 --- a/templates/default.mustache +++ b/templates/default.mustache @@ -1,66 +1,475 @@ -/** - * @name midnight-refined - * @description A cleaner, higher-contrast version for Gruvbox/Tinty. -*/ + :root { + --base00: #${colors.base00}; /* Black */ + --base01: #${colors.base01}; /* Bright Black */ + --base02: #${colors.base02}; /* Grey */ + --base03: #${colors.base03}; /* Brighter Grey */ + --base04: #${colors.base04}; /* Bright Grey */ + --base05: #${colors.base05}; /* White */ + --base06: #${colors.base06}; /* Brighter White */ + --base07: #${colors.base07}; /* Bright White */ + --base08: #${colors.base08}; /* Red */ + --base09: #${colors.base09}; /* Orange */ + --base0A: #${colors.base0A}; /* Yellow */ + --base0B: #${colors.base0B}; /* Green */ + --base0C: #${colors.base0C}; /* Cyan */ + --base0D: #${colors.base0D}; /* Blue */ + --base0E: #${colors.base0E}; /* Purple */ + --base0F: #${colors.base0F}; /* Magenta */ -@import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); + --primary-630: var(--base00); /* Autocomplete background */ + --primary-660: var(--base00); /* Search input background */ + } -:root { - --font: 'figtree'; - --corner-text: 'Midnight'; + /* Copyright (c) 2025 Cole Schaefer - /* Status indicators using standard Base16 accents */ - --online-indicator: #{{base0B-hex}}; - --dnd-indicator: #{{base08-hex}}; - --idle-indicator: #{{base0A-hex}}; - --streaming-indicator: #{{base0E-hex}}; + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: - /* Accent colors - using base0D (Blue) for a clean feel */ - --accent-1: #{{base0D-hex}}; - --accent-2: #{{base0D-hex}}; - --accent-3: #{{base0D-hex}}; - --accent-4: #{{base0C-hex}}; - --accent-5: #{{base0B-hex}}; - --mention: rgba({{base0A-rgb-r}}, {{base0A-rgb-g}}, {{base0A-rgb-b}}, 0.1); - --mention-hover: rgba({{base0A-rgb-r}}, {{base0A-rgb-g}}, {{base0A-rgb-b}}, 0.15); + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. - /* Text colors - bumping importance to base06/05 */ - --text-0: #{{base00-hex}}; - --text-1: #{{base06-hex}}; - --text-2: #{{base06-hex}}; - --text-3: #{{base05-hex}}; - --text-4: #{{base04-hex}}; - --text-5: #{{base03-hex}}; + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. */ - /* --- THE BACKGROUND OVERHAUL --- */ - /* We use base00 as the "Deep" master background and base01/02 for floating panels */ - --bg-4: #{{base00-hex}}; /* Master background (Deepest) */ - --bg-3: #{{base01-hex}}; /* Secondary background */ - --bg-2: #{{base02-hex}}; /* Buttons and UI elements */ - --bg-1: #{{base03-hex}}; /* Active/Clicked states */ - - --hover: rgba({{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 0.05); - --active: rgba({{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 0.1); - --message-hover: rgba({{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 0.03); + .theme-light, + .theme-dark, + .theme-darker, + .theme-midnight, + .visual-refresh { + --activity-card-background: var(--base01) !important; + --background-accent: var(--base03) !important; + --background-floating: var(--base02) !important; + --background-mentioned-hover: var(--base02) !important; + --background-mentioned: var(--base01) !important; + --background-message-highlight: var(--base01) !important; + --background-message-hover: var(--base00) !important; + --background-modifier-accent: var(--base02) !important; + --background-modifier-active: var(--base02) !important; + --background-modifier-hover: var(--base00) !important; + --background-modifier-selected: var(--base01) !important; + --background-primary: var(--base00) !important; + --background-secondary-alt: var(--base01) !important; + --background-secondary: var(--base01) !important; + --background-surface-highest: var(--base02) !important; + --background-surface-higher: var(--base02) !important; + --background-surface-high: var(--base02) !important; + --background-tertiary: var(--base00) !important; + --background-base-low: var(--base01) !important; + --background-base-lower: var(--base00) !important; + --background-base-lowest: var(--base00) !important; + --background-base-tertiary: var(--base00) !important; + --background-code: var(--base02) !important; + --background-mod-subtle: var(--base02) !important; + --bg-base-secondary: var(--base01) !important; + --bg-base-tertiary: var(--base00) !important; + --bg-brand: var(--base03) !important; + --bg-mod-faint: var(--base01) !important; + --bg-overlay-2: var(--base01) !important; + --bg-overlay-3: var(--base01) !important; + --bg-overlay-color-inverse: var(--base03) !important; + --bg-surface-raised: var(--base02) !important; + --bg-surface-overlay: var(--base00) !important; + --black: var(--base00) !important; + --blurple-50: var(--base0B) !important; + --border-faint: var(--base02) !important; + --brand-05a: var(--base01) !important; + --brand-10a: var(--base01) !important; + --brand-15a: var(--base01) !important; + --brand-260: var(--base0D) !important; + --brand-360: var(--base0D) !important; + --brand-500: var(--base0F) !important; + --brand-560: var(--base01) !important; + --button-danger-background: var(--base08) !important; + --button-filled-brand-background: var(--base0D) !important; + --button-filled-brand-background-hover: var(--base03) !important; + --button-filled-brand-text: var(--base00) !important; + --button-filled-brand-text-hover: var(--base05) !important; + --button-outline-positive-border: var(--base0B) !important; + --button-outline-danger-background-hover: var(--base08) !important; + --button-outline-danger-border-hover: var(--base08) !important; + --button-positive-background: var(--base0B) !important; + --button-positive-background-hover: var(--base03) !important; + --button-secondary-background: var(--base02) !important; + --button-secondary-background-hover: var(--base03) !important; + --card-primary-bg: var(--base02) !important; + --channel-icon: var(--base04) !important; + --channels-default: var(--base04) !important; + --channel-text-area-placeholder: var(--base03) !important; + --channeltextarea-background: var(--base01) !important; + --chat-background-default: var(--base02) !important; + --checkbox-background-checked: var(--base0D) !important; + --checkbox-border-checked: var(--base0D) !important; + --checkbox-background-default: var(--base02) !important; + --checkbox-border-default: var(--base03) !important; + --control-brand-foreground-new: var(--base0D) !important; + --control-brand-foreground: var(--base04) !important; + --custom-notice-text: var(--base01) !important; + --font-display: var(--font, "gg sans") !important; + --font-headline: var(--font, "gg sans") !important; + --font-primary: var(--font, "gg sans") !important; + --green-330: var(--base0B) !important; + --green-360: var(--base0B) !important; + --header-primary: var(--base04) !important; + --header-secondary: var(--base04) !important; + --home-background: var(--base00) !important; + --info-warning-foreground: var(--base0A) !important; + --input-background: var(--base02) !important; + --interactive-active: var(--base05) !important; + --interactive-hover: var(--base05) !important; + --interactive-muted: var(--base03) !important; + --interactive-normal: var(--base05) !important; + --mention-background: var(--base03) !important; + --mention-foreground: var(--base05) !important; + --menu-item-danger-active-bg: var(--base08) !important; + --menu-item-danger-hover-bg: var(--base08) !important; + --menu-item-default-hover-bg: var(--base03) !important; + --message-reacted-background: var(--base02) !important; + --message-reacted-text: var(--base05) !important; + --modal-background: var(--base01) !important; + --modal-footer-background: var(--base00) !important; + --notice-background-positive: var(--base0B) !important; + --notice-text-positive: var(--base01) !important; + --plum-23: var(--base02) !important; + --primary-130: var(--base05) !important; + --primary-300: var(--base05) !important; + --primary-500: var(--base02) !important; + --primary-600: var(--base00) !important; + --primary-630: var(--base01) !important; + --primary-660: var(--base00) !important; + --primary-800: var(--base00) !important; + --red-400: var(--base08) !important; + --red-460: var(--base08) !important; + --red-500: var(--base08) !important; + --red-630: var(--base08) !important; + --red: var(--base08) !important; + --scrollbar-auto-thumb: var(--base00) !important; + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--base00) !important; + --scrollbar-thin-track: transparent; + --search-popout-option-fade: none; + --search-popout-option-non-text-color: var(--base07) !important; + --status-danger-background: var(--base08) !important; + --status-danger: var(--base08) !important; + --status-negative: var(--base08) !important; + --status-positive-background: var(--base0B) !important; + --status-positive-text: var(--base0B) !important; + --status-positive: var(--base0B) !important; + --status-success: var(--base0B) !important; + --status-warning-background: var(--base03) !important; + --status-warning: var(--base09) !important; + --teal-430: var(--base0C) !important; + --text-brand: var(--base07) !important; + --text-feedback-positive: var(--base0B) !important; + --text-feedback-negative: var(--base08) !important; + --text-feedback-warning: var(--base09) !important; + --text-feedback-success: var(--base0B) !important; + --text-link: var(--base04) !important; + --text-muted: var(--base05) !important; + --text-negative: var(--base08) !important; + --text-normal: var(--base05) !important; + --text-positive: var(--base0B) !important; + --text-primary: var(--base05) !important; + --text-secondary: var(--base04) !important; + --text-tertiary: var(--base03) !important; + --text-warning: var(--base09) !important; + --textbox-markdown-syntax: var(--base05) !important; + --theme-base-color: var(--base00) !important; + --white-100: var(--base05) !important; + --white-200: var(--base05) !important; + --white-500: var(--base05) !important; + --white: var(--base05) !important; + --yellow-360: var(--base0A) !important; + --yellow-300: var(--base0A) !important; + --__lottieIconColor: var(--base03) !important; + } - /* Spacing & Roundness */ - --spacing: 12px; - --roundness-xl: 22px; - --roundness-l: 20px; - --roundness-m: 16px; - --roundness-s: 12px; - --roundness-xs: 10px; - --roundness-xxs: 8px; + /*--- Default Folder Color Recolor ---*/ + .default__459fb { + background-color: var(--base07) !important; + } - --discord-icon: none; - --moon-icon: block; - --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); - --moon-icon-size: auto; -} + /*--- Add Friend Button Text Recolor ---*/ + .addFriend__133bf { + color: var(--base00) !important; + } -/* Fix for selected text contrast */ -.selected_f5eb4b, -.selected_f6f816 .link_d8bfb3 { - color: #{{base00-hex}} !important; - background: #{{base0D-hex}} !important; -} + /*--- Close Icon Path Recolor ---*/ + svg[class^="closeIcon__"] path { + fill: var(--base01) !important; + } + + /*--- Listen Along Invite Recolor ---*/ + .invite__4d3fa { + background: var(--base01) !important; + border-color: var(--base02) !important; + } + + /*--- Activity Card Background Recolor ---*/ + .card__73069 { + background-color: var(--base01); + } + + div[class^="bar__"] { + background-color: var(--base01) !important; + border-color: var(--base02) !important; + } + /*--- Voice Bar Text Recolor ---*/ + .barText__7aaec { + color: var(--base0B) !important; + } + .unreadIcon__7aaec { + color: var(--base0B) !important; + } + + /*--- Mentions Bar Text Recolor ---*/ + .mentionsBar__7aaec .barText__7aaec { + color: var(--base05) !important; + } + + /*--- Forum Background Recolor ---*/ + .container_f369db { + background-color: var(--bg-overlay-2); + } + + /*--- Sidebar Icon Recolor ---*/ + .circleIconButton__5bc7e { + color: var(--base04); + } + + /*--- Summaries Tag Icon Recolor ---*/ + .summariesBetaTag_cf58b5 { + color: var(--base03); + } + + /*--- Folder Icon Recolor ---*/ + div.folderIconWrapper__48112 { + background-color: var(--base01) !important; + } + + /*--- Voice Chat Action Icon Recolor ---*/ + path[fill^="rgb(88,101,242)"], + path[stroke^="rgb(88,101,242)"] { + fill: var(--base05) !important; + stroke: var(--base05) !important; + } + .lottieIcon__5eb9b.lottieIconColors__5eb9b.buttonIcon_e131a9 { + --__lottieIconColor: var(--base05) !important; + } + div[class^="actionButtons"] [class^="button"][class*="buttonColor_"], + div[class^="actionButtons"] [class^="button"] [class*="buttonColor_"] { + background-color: var(--base02); + } + + /* --- Checkbox Recolor (OFF) --- */ + .container__87bf1 { + background-color: var(--base03) !important; + } + /* --- Checkbox Recolor (ON) --- */ + .checked__87bf1 { + background-color: var(--base0B) !important; + } + path[fill^="rgba(35, 165, 90, 1)"] { + fill: var(--base0B) !important; + } + + /* --- Secure Lock Icon Recolor --- */ + .lockIcon__2666b { + display: none; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#f23f43"], + rect[fill^="#f23f43"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#f0b232"], + rect[fill^="#f0b232"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#23a55a"], + svg[fill^="#23a55a"], + rect[fill^="#23a55a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#80848e"], + rect[fill^="#80848e"] { + fill: var(--base03) !important; + } + + /*--- Default Color Swap ---*/ + path[fill^="currentColor"], + svg[fill^="currentColor"], + rect[fill^="currentColor"] { + fill: var(--base06) !important; + } + path[d^="M12 22a10 10 0 1"] { + fill: var(--base02) !important; + } + + /*--- Voice Chat Icon Badge Recolor ---*/ + div[class^="iconBadge"] path[d^="M12 3a1 1 0 0 0-1-1h-.06"], + div[class^="iconBadge"] path[d^="M15.16 16.51c-.57.28"] { + fill: var(--base05) !important; + } + + /*--- Nitro Icon Recolor ---*/ + .premiumLabel_e681d1 svg path, + svg.guildBoostBadge__5dba5 path { + fill: var(--base0E) !important; + } + + /*--- Server Booster Icon Recolor ---*/ + .premiumIcon__5d473 { + color: var(--base0F); + } + + /*--- Call Container Recolor ---*/ + .callContainer_cb9592 { + background-color: var(--base00); + } + .gradientContainer_bfe55a { + background-image: var(--base00); + } + + /*--- Store Gradient Recolors ---*/ + .gradient_e9ef78 { + background: var(--base01) !important; + } + .bannerGradient__955a3 { + background: var(--base00) !important; + } + + /*--- Text Selection Highlight Recolor ---*/ + ::selection { + background-color: var(--base02); + color: var(--base05); + } + + /*--- Increase Text Legibility ---*/ + * { + text-rendering: optimizeLegibility !important; + } + + /*--- Codeblock Syntax Highlighting Recolor ---*/ + .hljs-attr { + color: var(--base06) !important; + } + .hljs-attribute { + color: var(--base06) !important; + } + .hljs-number { + color: var(--base06) !important; + } + .hljs-selector-class { + color: var(--base06) !important; + } + .hljs-comment { + color: var(--base03) !important; + } + .hljs-subst { + color: var(--base0D) !important; + } + .hljs-selector-pseudo { + color: var(--base0B) !important; + } + .hljs-section { + color: var(--base0B) !important; + } + .hljs-keyword { + color: var(--base08) !important; + } + .hljs-variable { + color: var(--base08) !important; + } + .hljs-meta { + color: var(--base03) !important; + } + .hljs-built_in { + color: var(--base09) !important; + } + .hljs-string { + color: var(--base0B) !important; + } + .hljs-title { + color: var(--base0E) !important; + } + + /*--- Visual Refresh Recolor ---*/ + /*--- BIG WORK IN PROGRESS. DISCORD MADE SOME BIG CHANGES. ---*/ + .visual-refresh { + div[class^="autocomplete__"] { + background-color: var(--base02) !important; + } + path[fill^="rgba(88, 101, 242, 1)"] { + fill: var(--base0B) !important; + } + div[class^="topicsPillContainer"] { + --bg-overlay-2: var(--base02) !important; + } + .bg__960e4 { + background: var(--base00) !important; + } + .wrapper_ef3116 { + background-color: var(--base00) !important; + } + .sidebar_c48ade { + background-color: var(--base00) !important; + } + .searchbar__97492 { + background-color: var(--base02) !important; + } + .channeltextarea_f75fb0 { + background: var(--base02) !important; + } + .chatcontent_f75fb0 { + background-color: var(--base01) !important; + } + .chatgradient__36d07 { + background: linear-gradient(to bottom, transparent, var(--base01)) !important; + } + .members_c8ffbb, + .member_c8ffbb { + background: var(--base00) !important; + } + .voicebar__7aaec { + background-color: var(--base02) !important; + } + button.button__67645.redGlow__67645, + span.button__67645.redGlow__67645 { + background-color: var(--base02) !important; + } + + /*--- Status Icon Recolor (DO NOT DISTURB) ---*/ + svg[fill^="#d83a42"], + rect[fill^="#d83a42"] { + fill: var(--status-danger) !important; + } + /*--- Status Icon Recolor (IDLE) ---*/ + svg[fill^="#ca9654"], + rect[fill^="#ca9654"] { + fill: var(--status-warning) !important; + } + /*--- Status Icon Recolor (ONLINE) ---*/ + path[fill^="#43a25a"], + svg[fill^="#43a25a"], + rect[fill^="#43a25a"] { + fill: var(--status-positive) !important; + } + /*--- Status Icon Recolor (OFFLINE) ---*/ + svg[fill^="#83838b"], + rect[fill^="#83838b"] { + fill: var(--base03) !important; + } + }